Css эффекты – Какие существуют в CSS эффекты и техники для дизайна Knockout: применение необходимых свойств

Содержание

Красочные эффекты наведения на основе CSS

В этой статье мы собрали 17 потрясающих эффектов наведения, созданных на основе CSS. Их можно использовать бесплатно на своем сайте или как основу для создания собственных эффектов.

0

0

0

0

Strikethrough Hover

0

Hover CSS3

0

0

Image and Title with Icons

0

Gradient Button Hover

0

0

0

0

Pure CSS Blur Hover Effect

0

0

Thumbnail Hover Effect

0

0

0

Не пренебрегайте дизайном пользовательского интерфейса при разработке сайта. Это одна из наиболее важных составляющих его внешнего вида. В первую очередь следует уделять внимание макету с элементами пользовательского интерфейса, шрифтам и цветам. Но эффекты анимации также играют немаловажную роль. Они помогают выделить ваш бренд и задать тон сайту, а также дополняют его стиль.

Данная публикация представляет собой перевод статьи «Amazing Animated CSS Hover Effects» , подготовленной дружной командой проекта Интернет-технологии.ру

Учебник CSS 3. Статья «Переходные эффекты в CSS»

В этой статье учебника речь пойдет о переходных эффектах, мы с Вами узнаем, что из себя в CSS представляют переходные эффекты, с помощью них научимся создавать простую анимацию и сделаем наши страницы более интерактивными и динамичными.

Установка переходного эффекта

Прежде всего, давайте, разберемся, что из себя представляет переходный эффект. По большому счёту, переходный эффект представляет собой анимацию элемента (объекта), в которой элемент первоначально имеет один набор CSS свойств, а за определенный промежуток времени этот набор свойств изменяется.

Рис.161 Пример переходного эффекта в повседневной жизни.

Например, у нас есть элемент, у которого задан стиль, определяющий цвет заднего фона — розовый. Мы хотим создать плавный эффект перехода цвета заднего фона в синий. Что в нашем случае для этого необходимо?

1. Понять какое свойство нам необходимо изменить, в нашем случае это свойство background-color со значением pink:

.myElement {
background-color: pink; /* устанавливаем цвет заднего фона */
}

2. Определить каким будет конечный вид элемента, для нашего примера это элемент со свойством background-color, значение которого будет определять цвет синего цвета (например, в системе RGB — rgb(0,0,255)):

.myElement {
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона */
}

3. Какие у нас есть варианты, чтобы инициировать переход от одного цвета к другому? Как вариант мы можем воспользоваться псевдоклассом :hover, мы неоднократно рассматривали его в примерах этого учебника. Давайте создадим стили:

.myElement {
background-color: pink; /* устанавливаем цвет заднего фона */
}
.myElement:hover {
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}

Не кажется ли Вам, что мы, как кальсоновые гномы пропустили какую-то очень важную вещь в переходе от одного цвета к другому? Именно! У нас нет переходного эффекта при изменении CSS стилей элемента, и изменение цвета происходит мгновенно.

Длительность переходного эффекта

Настало время познакомиться с первым из пяти CSS свойств, которые нам позволят создавать и управлять переходными эффектами в ваших документах. Свойство transition-duration определяет, сколько секунд или

миллисекунд эффект перехода занимает времени.

Обращаю Ваше внимание, что переходные эффекты были введены в стандарте CSS 3 и поддерживаются всеми современными браузерами:

Мы с Вами уже неоднократно говорили про индексы производителей, если Вам необходима поддержка ранних версий браузеров на своем сайте, то не забывайте про их использование совместно со свойствами, отвечающими за переходные эффекты, которые мы рассмотрим ниже.

Давайте рассмотрим пример, в котором изменение цвета будет сопровождаться переходным эффектом при наведении на элемент. Длительность переходного эффекта задается в числовой форме в секундах (s) или миллисекундах (ms). Одна секунда соответствует тысяче миллисекунд.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Длительность переходного эффекта при наведении</title>
<style>
div {
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */
width: 100px; /* ширина элемента */	
height: 100px; /* высота элемента */	
background-color: pink; /* устанавливаем цвет заднего фона */
margin-right: 25px; /* внешний отступ с правой стороны */	
text-align: center; /* выравнивание текста по центру */	
}
.test1:hover
{ transition-duration: .5s; /* продолжительность переходного эффекта 0,5 секунд */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test2:hover { transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test3:hover { transition-duration: 1.5s; /* продолжительность переходного эффекта 1,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test4:hover { transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ }
.test5:hover
{ transition-duration: 2.5s; /* продолжительность переходного эффекта 2,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } </style> </head> <body> <div class = "test1">0.5s hover</div> <div class = "test2">1s hover</div> <div class = "test3">1.5s hover</div> <div class = "test4">2s hover</div> <div class = "test5">2.5s hover</div> </body> </html>

В этом примере с использованием CSS свойства transition-duration мы установили различную длительность переходного эффекта для элементов <div> при наведении.

Результат нашего примера:

Рис.162 Пример переходного эффекта при наведении (длительность переходного эффекта установлена только на псевдокласс).

Возможно, вы обратили внимание на тот факт, что как только мы убираем с элемента указатель мыши, цвет элемента изменяется к первоначальному, как будто никакого эффекта перехода и не установлено.


Обратите внимание на те стили, которые мы использовали, мы действительно указали длительность эффекта перехода только при наведении на элемент, а в этом случае браузер возвращает первоначальный стиль мгновенно.


Давайте рассмотрим пример, в котором установим элементу отдельное значение свойства transition-duration равное 5 секундам:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Управление скоростью обратного переходного эффекта</title>
<style>
div {
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */
width: 100px; /* ширина элемента */	
height: 100px; /* высота элемента */	
background-color: pink; /* устанавливаем цвет заднего фона */
margin-right: 25px; /* внешний отступ с правой стороны */	
text-align: center; /* выравнивание текста по центру */	
transition-duration: 5s; /* продолжительность переходного эффекта 5 секунд */
}
.test1:hover
{ transition-duration: .5s; /* продолжительность переходного эффекта 0,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test2:hover { transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test3:hover { transition-duration: 1.5s; /* продолжительность переходного эффекта 1,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test4:hover { transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test5:hover { transition-duration: 2.5s; /* продолжительность переходного эффекта 2,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } </style> </head> <body> <div class = "test1">0.5s hover<br>5s element</div> <div class = "test2">1s hover<br>5s element</div> <div class = "test3">1.5s hover<br>5s element</div> <div class = "test4">2s hover<br>5s element</div> <div class = "test5">2.5s hover<br>5s element</div> </body> </html>

В этом примере с использованием CSS свойства transition-duration мы установили различную длительность переходного эффекта для элементов <div> при наведении, и установили для самого элемента продолжительность переходного эффекта равного 5 секундам. Обратите внимание, что если переходный эффект не был закончен (указатель отведен раньше), то и обратный переходный эффект будет длиться пропорционально меньше.

Результат нашего примера:

Рис. 163 Управление скоростью обратного переходного эффекта.

Хорошо, теперь мы с Вами научились задавать длительность перехода как при наведении на элемент, так и устанавливать длительность возвращения этой анимации (перехода) обратно. Во многих случаях нам достаточно того, чтобы значения эффекта перехода между двумя состояниями были равны. Для этого нам достаточно установить значение свойства transition-duration только на сам элемент, что значительно сократит CSS код, рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Управление скоростью переходного эффекта</title>
<style>
div {
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */
width: 100px; /* ширина элемента */	
height: 100px; /* высота элемента */	
background-color: pink; /* устанавливаем цвет заднего фона */
margin-right: 25px; /* внешний отступ с правой стороны */	
text-align: center; /* выравнивание текста по центру */	
transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */
}
div:hover {
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "test1">2s element</div>
		<div class = "test2">2s element</div>
		<div class = "test3">2s element</div>
		<div class = "test4">2s element</div>
		<div class = "test5">2s element</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-duration мы установили одинаковую длительность переходного эффекта для элементов <div> как при наведении, так и при переходе к первоначальному состоянию.

Результат нашего примера:

Рис. 164 Управление скоростью переходного эффекта.

Перед тем как мы перейдем к изучению дальнейшего материала, посвященному переходным эффектам, хочу обратить Ваше внимание на то, что далеко не все свойства CSS могут быть анимированы. Вы всегда можете подсмотреть анимируемо ли свойство в справочнике CSS на сайте.

Переходный эффект для отдельных свойств

И так, приступим к изучению особенностей следующего свойства — transition-property, оно указывает имя свойства CSS для которого используется переходный эффект. По умолчанию все свойства получают эффект перехода (значение по умолчанию all). Вы можете как полностью убрать все свойства, подлежащие переходному эффекту установив значение свойства none, так и указать конкретное свойство, или свойства, перечисленные через запятую.

Кроме того, допускается указать для каждого отдельного свойства свою продолжительность переходного эффекта. Давайте рассмотрим эту особенность на следующем примере:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Указание длительности перехода для разных свойств</title>
<style>
div {
width: 200px; /* ширина элемента */			
height: 200px; /* высота элемента */	
font-size: 2em; /* размер шрифта */	
font-weight: bold; /* жирное начертание символов */	
text-align: center; /* выравниваем текст по центру */	
line-height: 200px; /* высота строки (выравниваем по высоте)*/
margin: 0 auto; /* выравниваем блок по горизонтали (внешними отступами)*/
color: green; /* цвет текста */
background-color: yellow; /* устанавливаем цвет заднего фона */
border: 3px solid #000; /* сплошная граница 3 пикселя черного цвета */
transition-duration: 2s, 4s, 6s; /* продолжительность переходного эффекта (для каждого свойства своя) */
transition-property: background-color, border-color, color; /* свойства, которые подлежат переходному эффекту */
}
div:hover {
background-color: #000; /* устанавливаем цвет заднего фона при наведении*/
color: red; /* устанавливаем цвет текста при наведении*/
border-color: red; /* устанавливаем цвет границ элемента при наведении*/
}
</style>
</head>
	<body>
		<div>My element</div>
	</body>
</html>

Обращаю Ваше внимание на то, что порядок указания свойств соответствует порядку показателей продолжительности переходного эффекта, перечисленных через запятую.

В этом примере с использованием CSS свойства transition-property мы установили свойства, которые подлежат переходному эффекту, а с использованием свойства transition-duration указали для них различную продолжительность.

Результат нашего примера:

Рис. 165 Указание длительности перехода для разных свойств.

Задержка перед переходным эффектом

Следующее CSS свойство — transition-delay определяет, когда эффект перехода начнется (выступает в роли задержки начала эффекта). То есть это свойство задерживает время начала переходного эффекта.


Время задержки указывается числом в секундах (s) или миллисекундах (ms). Значение по умолчанию составляет 0 секунд (отсутствие времени задержки).


По аналогии с предыдущими свойствами допускается указывать более одного значения задержки перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение задержки соответствует значению (в том же порядке), которое определено в свойстве transition-property.

Здесь есть нюанс, если список задержек меньше, чем количество значений (свойств), определённых свойством transition-property, то значения задержек эффекта перехода для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше задержек, чем значений, указанных в свойстве transition-property, то список задержек усекается до количества значений этого свойства.

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Задержка переходного эффекта</title>
<style>
body, html {
height: 100%; /* высота элементов */	
margin: 0; /* убираем внешние отступы */		
}
div {
width: 100px; /* ширина элемента */			 	
height: 50px; /* высота элемента */	
background-color: yellow; /* устанавливаем цвет заднего фона */
border: 1px solid #000; /* сплошная граница размером 1 пиксель черного цвета */	
transition-duration: 500ms, 800ms; /* продолжительность переходного эффекта */	
transition-property: width, height; /* свойства, которые подлежат переходному эффекту */
transition-delay: 500ms, 800ms; /* задержка для переходного эффекта (для каждого свойства своя) */
}
div:hover {
width: 50%; /* ширина элемента при наведении */	
height: 50%; /* высота элемента при наведении */	
}
</style>
</head>
	<body>
		<div>My element</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-delay мы установили задержку для переходного эффекта (для свойства width — 500 миллисекунд, а для свойства height — 800 миллисекунд).

Результат нашего примера:

Рис. 166 Пример задержки переходного эффекта.

Обращаю Ваше внимание, что для большинства задач достаточно установить задержку переходного эффекта для одного свойства, чтобы не испытывать нервную систему конечного пользователя.

С помощью задержки переходного эффекта Вы можете создавать интересные эффекты, давайте создадим выдвигающуюся боковую панель. В этом примере мы затрагиваем тему позиционирования, которую мы рассматривали в предыдущей статье учебника «Позиционирование элементов в CSS». Перейдем к примеру

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Выдвижная панель на CSS</title>
<style>
body, html {
height: 100%; /* высота элементов */	
margin: 0; /* убираем внешние отступы */		
position: relative; /* относительное позиционирование */	
}
div {
position: fixed; /* фиксированное позиционирование */	
top: 30px; /* отступ от верхнего края */
right: -135px; /* отрицательный отступ от правого края (прячем элемент за экран) */
width: 200px; /* ширина элемента */			 
height: 50px; /* высота элемента */
line-height: 50px; /* высота строки */
background-color: yellow; /* устанавливаем цвет заднего фона */
border: 1px solid #000; /* сплошная граница размером 1 пиксель черного цвета */
transition-delay: 2s; /* задержка переходного эффекта 2 секунды */
}
div:hover {
transition-delay: 0s; /* отсутствие задержки при наведении на элемент */
right: 0; /* отступ от правого края равен нулю */
}
</style>
</head>
	<body>
		<div>Hover Me -----Thank you!-----</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-delay мы установили задержку переходного эффекта при наведении (псевдокласс :hover) равную нулю, чтобы наша панель моментально выезжала, если бы мы этого не указали, то она бы получила задержку равную двум секундам, установленную для самого элемента. Благодаря этим действиям, пользователь быстро получает информацию при наведении, но даже если он уберет мышь с элемента наша выдвигающаяся панель будет полностью выдвинута еще в течении двух секунд.

Результат нашего примера:

Рис. 167 Пример задержки переходного эффекта.

Изменение скорости переходного эффекта

CSS свойство transition-timing-function используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую «разгона», так что скорость перехода может меняться в течение длительности эффекта перехода.


Хочу обратить Ваше внимание, что за продолжительность переходного эффекта отвечает свойство transition-duration, а это свойство не меняет продолжительность, а лишь регулирует скорость в различные промежутки этого эффекта, например, 70% времени переходного эффекта собирайся как девушка, а 30% беги на работу как проспал, в результате чего продолжительность одна, а скорость эффекта при этом различается.


Допускается указывать более одного значения функций перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение функции соответствует значению (в том же порядке), которое определено в свойстве transition-property. Если список функций меньше, чем количество значений (свойств), определённых свойством transition-property, то значения функций для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше функций, чем значений, указанных в свойстве transition-property, то список функций усекается до количества значений этого свойства.

Свойство transition-timing-function имеет большое количество различных значений, которые определяют скорость переходного эффекта. Предлагаю Вам вкратце пробежать по ним и перейти к примерам, чтобы наглядно увидеть результат:

ЗначениеОписание
easeЭффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25,0.1,0.25,1). Это значение по умолчанию.
linearОпределяет эффект перехода с одинаковой скоростью от начала до конца. Значение эквивалентно cubic-bezier(0,0,1,1). Точка 1 расположена на 0 по оси x и по оси y, точка 2 — на 1 по оси x и по оси y.
ease-inОпределяет эффект перехода с медленного старта. Значение эквивалентно cubic-bezier(0.42,0,1,1).
ease-outОпределяет эффект перехода с медленным окончанием. Значение эквивалентно cubic-bezier(0,0,0.58,1).
ease-in-outОпределяет эффект перехода с медленного старта и медленным окончанием (симметричная кривая Безье). Значение эквивалентно cubic-bezier(0.42,0,0.58,1). Точка 1 расположена на 0,42 по оси x и на 0 по оси y, точка 2 — на 0,58 по оси x и на 1 по оси y.
cubic-bezier(n,n,n,n)Определяет пользовательские значения в кубической функции Безье. Она допускает 4 числовых значения от 0 до 1 ( Первые два значения — координаты x и y первой точки, а вторые два значения — координаты x и y второй точки).
steps(int,start|end)Указывает пошаговую функцию, с двумя параметрами. Первый параметр задает число интервалов в функции (целое положительное число (больше 0)). Второй параметр является необязательным и имеет значения «start» или «end» и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр опущен, то присваивается значение «end». Значение «start» осуществляет переход в начале каждого шага, а «end» в конце каждого шага.
step-startЗначение эквивалентно steps(1, start). Свойство сразу принимает конечное значение. Значение свойства transition-duration (продолжительность перехода) игнорируется.
step-endЗначение эквивалентно steps(1, end). Свойство принимает конечное значение в конце шага (т.е. если имеется свойство transition-duration (продолжительность перехода), то оно выступит в роли задержки перехода).

Как правило, функция ease, при которой анимация начинается медленно, затем ускоряется и замедляется к концу (значение по умолчанию), или функция linear, которая определяет эффект перехода с одинаковой скоростью, подходит для большинства задач. Если Вам необходимо, что-то эдакое, то на этом ресурсе вы сможете подобрать оптимальные для Вашей фантазии значения функции.

Рассмотрим пример в котором сделаем выдвигающиеся панели для которых зададим различные математические функции, определяющие скорость переходного эффекта.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Скорость переходного эффекта в CSS</title>
<style>
div {
width: 100px; /* ширина элементов */	
height: 60px; /* высота элементов */	
background: khaki; /* устанавливаем цвет заднего фона */
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */ 
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */	
transition-duration: 1s; /* продолжительность переходного эффекта */}
div:hover {
height: 250px; /* высота элементов при наведении */	
background: Moccasin; /* устанавливаем цвет заднего фона при наведении */
}
.test {transition-timing-function: ease;} /* указываем значение функции перехода */	
.test2 {transition-timing-function: linear;} /* указываем значение функции перехода */	
.test3 {transition-timing-function: ease-in;} /* указываем значение функции перехода */	
.test4 {transition-timing-function: ease-out;} /* указываем значение функции перехода */	
.test5 {transition-timing-function: ease-in-out;} /* указываем значение функции перехода */	
.test6 {transition-timing-function: cubic-bezier(0.5,0.05,0.7,0.5);} /* указываем значение функции перехода */	
</style>
</head>
	<body>
		<div class = "test">ease</div>
		<div class = "test2">linear</div>
		<div class = "test3">ease-in</div>
		<div class = "test4">ease-out</div>
		<div class = "test5">ease-in-out</div>
		<div class = "test6">cubic-bezier</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-timing-function мы создали выдвигающиеся панели для которых задали различные математические функции, определяющие скорость переходного эффекта в различные промежутки времени.

Результат нашего примера:

Рис. 168 Скорость переходного эффекта в CSS.

Давайте рассмотрим пример использования пошаговых функций в CSS, используя свойство transition-timing-function:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Скорость переходного эффекта в CSS (пошаговые функции).</title>
<style>
div {
width: 100px; /* ширина элементов */	
height: 60px; /* высота элементов */	
background: khaki; /* устанавливаем цвет заднего фона */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */	
margin-bottom: 10px; /* внешний отступ снизу */
}
div:hover {
width: 550px; /* ширина элемента при наведении */
}
.test {
transition-duration: 3s; /* продолжительность переходного эффекта 3 секунды */	
transition-timing-function: steps(5, end);  /* указываем значение функции перехода (пошаговая функция) */
}
.test2 {
transition-duration: 3s; /* продолжительность переходного эффекта 3 секунды */
transition-timing-function: steps(5, start); /* указываем значение функции перехода (пошаговая функция) */
}
.test3 {
transition-timing-function: step-start; /* указываем значение функции перехода (пошаговая функция) */
}
.test4 {
transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */
transition-timing-function: step-end; /* указываем значение функции перехода (пошаговая функция) */
}
</style>
</head>
	<body>
		<div class = "test">steps(5, end)</div>
		<div class = "test2">steps(5, start)</div>
		<div class = "test3">step-start</div>
		<div class = "test4">step-end</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-timing-function мы указали различные пошаговые функции.

Обратите внимание, что при использовании функции step-start значение свойства transition-duration (продолжительность перехода) игнорируется, а при использовании функции step-end оно выступает в роли задержки перехода.

Результат нашего примера:

Рис. 169 Скорость переходного эффекта в CSS (пошаговые функции).

Универсальное свойство transition

Ну и апогеем этой статьи послужит изучение свойства transition, оно является универсальным и позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.

Это свойство является короткой записью для следующих свойств, которые мы изучили (список соответствует порядку указания значений):

Синтаксис свойства:

transition:"property duration timing-function delay"; /* порядок важен */

Обращаю Ваше внимание, что если вы хотите задать только задержку (transition-delay), то вам придется указать и продолжительность (transition-duration) равную нулю (0s). Например, если вы хотите указать задержку 4 секунды, то вам необходимо записать это так:

transition: 0s 4s; /* задержка четыре секунды */

Допускается перечислять эффект перехода отдельно для каждого свойства в одном объявлении. Вы можете указывать не все значения, но при этом необходимо соблюдать порядок свойств, указанный выше.

transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s;

/* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды,
при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease)
и это всё происходит с предварительной задержкой в 100 миллисекунд.

Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде,
при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear)
и это всё происходит с предварительной задержкой в 2 секунды.

Свойство background будет применено с задержкой 4 секунды. */

Давайте, в заключение статьи рассмотрим пример в котором создадим переходный эффект для элемента <input>.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования универсального свойства transition</title>
<style>
input[type=text] {
width: 20%; /* ширина элемента */
transition: width 500ms ease-in-out; /* описываем переходный эффект (свойство, продолжительность и функция) */
}
input[type=text]:focus {
width: 40%; /* ширина элемента при фокусе на элементе */
}
</style>
</head>
	<body>
		Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос">
	</body>
</html>

В этом примере с использованием CSS свойства transition мы указали какое свойство подлежит переходному эффекту, продолжительность эффекта и указали функцию, определяющую скорость переходного эффекта в различные промежутки времени.

Результат нашего примера:

Рис. 170 Пример использования универсального свойства transition.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующий документ:

    Практическое задание № 33.

    Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.


© 2016-2020 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]

15 удивительных текстовых эффектов с помощью CSS3

Каждый веб-дизайнер хочет создавать только стоящие веб сайты, которые оценят все пользователи интернета.

Конечно, невозможно удовлетворить всем вкусам. Еще, как веб-дизайнер вы должны просто попытаться сделать все возможное, чтобы создать сайт, который понравится посетителям! К счастью, уже доступны самые мощные инструменты и ресурсы, чтобы создавать потрясающие веб-сайты и мы собрали для вас некоторые полезные фрагменты CSS, которые помогут сделать интересную фишку в ваших проектах!

Это 15 удивительных текстовых эффектов с помощью CSS3 – все подобраны и мы думаем, что они помогут добавить блеск оригинальности в ваших проектах. Некоторые из них полезны для определенных целей, а другие подходят для многократного использования.

Все рукотворные совершенствоваться и этот пост не исключение! В случае, если мы пропустили ваш любимый текстовый эффект с помощью CSS3, пожалуйста, добавьте его в форме комментария, и мы добавим его в будущем пост! Также, это будет здорово поделиться с нами Вашим мнением об этих текстовых эффектов.

Если вы любите цветы и вы хотите замечательный и полный цвета текста эффект, то это предложение идеальное решение для вас! Это очень подходит для отображения имени креативного агентства или для портфеля проектов. Конечно, он может быть использован для любого другого типа проектов – если вы хотите выделиться, то этот текстовый эффект-отличный выбор!

Волновой эффект действительно потрясающий! Это может использоваться, чтобы добавить немного таинственности. Было бы интересно использовать его для того, чтобы подчеркнуть скидку или специальное предложение, которое работает только в течение очень короткого периода времени.Что вы думаете?

Это очень интересный текстовый эффект; я думаю, что из-за цветовой схемы используется он может быть применен, чтобы подчеркнуть винтажный дизайн. Это умное использование теней текста и он имеет потенциал, чтобы привлечь внимание пользователей. Не забывайте, что Винтаж никогда не умрет!

Следующий текстовый эффект работает как магнит для зрителей. Вы можете использовать это, чтобы улучшить форму, чтобы подчеркнуть новый продукт, предлагаемый для продажи или просто для привлечения глазах зрителей. Это заманчивые и мудрый веб-дизайнер будет использовать его на его/ее преимущество!

Я думаю, что тенденция среди веб-дизайнеров является создание более динамичной онлайн присутствий. Прохладный скользящий эффекты и переходы страниц чаще всего используются возможности добавления больший динамизм сайт. Все же, если вы хотите еще больше динамизма, этот удивительный текст с помощью CSS3 эффект может быть хорошим вариантом. Я думаю, что это простое, но эффективное решение!

Самые требовательные клиенты-это дети, но это не должно заставить вас отказаться создании сайтов для них. Если вы работаете на малыша, связанных с проектом или смешной один, то вы можете использовать этот эффект для текста! В Jokerman шрифт имеет свою особую красоту, не так ли?

CSS3 и 3D-моделирования имеют общего больше, чем только цифра “3”! С помощью CSS3 позволяет создавать красивые 3D эффекты как один из этого фрагмента.Этот эффект подойдет для большой пул проектов и я думаю, что вы должны дать ему попробовать!

Иногда, играя с огнем может быть весело! Не волнуйся, я не пироман, я просто поражена этим прикольный текстовый эффект! Я не помню, чтобы видел этот текстовый эффект в макете других сайтов, так вот еще один повод использовать его и создать оригинальный сайт!

В ситуации, которую Вы цените больше дискретной текстовый эффект, этот “туманный эффект” — это моя рекомендация. Это правда, что он может негативно повлиять на юзабилити вашего сайта. С другой стороны, если Вы не рискуете, Вы не выиграете! Конечно, это могут быть переделаны, чтобы соответствовать Вашим требованиям!

Хотя этот текстовый эффект является довольно сложной, она реализуется с помощью CSS, нет никакого JavaScript. Лично я считаю, что он может быть использован для музыкальных сайтах или выделить определенный элемент с веб-сайта.

Это очень дискретный эффект, но я думаю, что он может добавить “Вау” эффект в макеты. Металлические выглядят чудесно создан и появляющиеся/исчезающие моменты акцентировать.

Я может быть субъективна, потому что я большой фанат «Звездных Войн» фильм, но этот текстовый эффект действительно классный. Это делает ваши проекты более интересные и, несомненно, поклонники этого фильма влюбилась в ваш сайт из-за этого эффекта.

Этот текстовый эффект существенно способствует повышению взаимодействия пользователь-сайт.Это показывает еще раз, что CSS3 имеет большой потенциал и талантливый веб-дизайнер сможет создать красивые анимации с помощью всего нескольких строк кода.

Это последний пункт из этого списка, но Вы не должны игнорировать его. Гораздо больше, Вишенка на торте, дело в том, что нет более 10 CSS3 удивительные текстовые эффекты. Я думаю, что вы должны тщательно проверять их все и изучить, как эти привлечении эффекты были реализованы.

Те, которые все еще думают, что атрибуты CSS не достаточно, чтобы создать интересные текстовые эффекты должны дать прислушаться к этому! Она сочетает в себе несколько эффектов — анимация, 3D-перспективы, теней и текстовые настройки. Я думаю, что тени и обводки сочетание-это старомодно, но этот проект создан с целью показать, чего можно достичь с помощью “чистого CSS”.

61 CSS-эффект для текста — Записки преподавателя

Коллекция эффектов текста на HTML и CSS с мизерными вставками JavaScript: 3D, анимация, глюки, эффекты наведение, тени, вращение и печать. Живые примеры, код можно загрузить (*zip).

3D CSS Typography

3D CSS typography with HTML and CSS(SCSS).
Автор: Noah Blon
Январь 6, 2017

CSS Text Stroke

Change the text to see the animation again.
Автор: Ignacio Correia
Апрель 27, 2015

3D Extrude Text Effect

HTML and CSS 3D extrude text effect
Автор: Pete Leidy
Июнь 29, 2014

3D Text Effect — Mousemove

Nice 3D Text effect with jQuery mousemove.
Автор: Dennis Garrn
Июль 12, 2013

Анимационный клип волны по тексту

Animated Wave Clipped By Text

Animated wave inside text with svg. Image in the background and gradient filling the wave.
Автор: web-tiki
Январь 5, 2017

Break/Animate Warping Text Paragraph Example

HTML, CSS and JavaScript break/animate warping text paragraph example.
Автор: James
Январь 2, 2017

Smoky Text

Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect.
Автор: Bennett Feely
Январь 1, 2017

Bubbling Text Effect

A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they’re coming from behind the text, and then fade out and are removed.
Автор: html5andblog
Декабрь 1, 2016

Animated Text Fill

Fill your text with animated background images — no JavaScript required.
Автор: Daniel Riemer
Ноябрь 19, 2016

Pure CSS Text Animation

HTML and CSS text animation.
Автор: Robin Treur
Октябрь 29, 2016

Text Color Draw

Path drawing of text using greensock’s drawSVG plugin.
Автор: CJ Gammon
Октябрь 15, 2016

Animating SVG Text

HTML, CSS and SVG animating text.
Автор: Fabio Ottaviani
Сентябрь 22, 2016

Shaded Text

Shaded text, a SVG + CSS3 experiment about animated shadows. It isn’t optimized for mobile devices… yet.
Автор: Rafael González
Сентябрь 16, 2016

Text Animation: Montserrat

HTML and CSS text animation.
Автор: Claire Larsen
Январь 19, 2016

Squiggly Text

Squiggly text experiment with SVG filters.
Автор: Lucas Bebber
Октябрь 22, 2015

Shattering Text Animation

GSAP text animation. SVG path shattering. Slow motion on hover.
Автор: Arsen Zbidniakov
Сентябрь 17, 2015

Wave Text Effect (With SVG/Blend Mode)

Wave text effect with HTML and CSS.
Автор: Lucas Bebber
Сентябрь 4, 2015

GSAP Text Animation

Text effect using Greensock.
Автор: Nate Wiley
Август 28, 2015

Colorful Text Animation

Fluid and configurable colorful text animation module made with SCSS.
Автор: Hendry Sadrak
Июль 27, 2015

Animated Text With Snap.svg

Work with this feels like an old good Flash 🙂
Автор: Yoksel
Май 17, 2015

Animated Text Fill

Animated text fill with HTML(Pug), CSS(SCSS) and SVG.
Автор: Cesar C.
Февраль 17, 2015

SVG Path Animated Text

Animated the text «Design» based on one SVG path. Click to toggle animation
Автор: Tamino Martinius
Август 14, 2014

Animated «Text-Shadow» Pattern

Uses -webkit-background-clip: text & linear-gradient to simulate striped text shadow.
Автор: carpe numidium
Декабрь 21, 2013

Line Text

Animated text with HTML, CSS and JavaScript.
Автор: Johan Fagerbeg
Сентябрь 22, 2013

Глюки

VHS Text

VHS text with HTML, CSS and JavaScript.
Автор: Maria
Январь 12, 2017

Glitched Text

HTML, CSS and JavaScript glitched text.
Автор: Derek Palladino
Октябрь 17, 2016

Glitch Text

HTML(Pug) and CSS(SCSS) glitch text.
Автор: zoite
Сентябрь 30, 2016

Glitchy Text

Glitchy text with HTML and CSS(SCSS).
Автор: Matt Stvartak
Сентябрь 27, 2016

Glitch

Glitch text with HTML and CSS.
Автор: Christian Petersen
Май 6, 2016

CSS-Only Glitch Effect

Glitch sort of effect with CSS animation.
Автор: Justin
Февраль 5, 2015

CSS Glitched Text By Skew

HTML and CSS glitched text by skew.
Автор: naiting
Сентябрь 3, 2014

Demo Image: CSS Perspective Text HoverРетроспектива — CSS-эффект наведения

CSS Perspective Text Hover

An experiment using webfonts in combination with CSS 3D transform tools.
Автор: James Bosworth
Август 22, 2016

3D Hover Text Effect

HTML, CSS and JavaScript 3d hover text effect.
Автор: Sascha Sigl
Ноябрь 20, 2015

Animated Highlighted Text

The idea is simple, it make used of linear gradient and transition.
Автор: Rian Ariona
Февраль 19, 2015

Happy Text

HTML and CSS happy text effect.
Автор: Bennett Feely
Декабрь 6, 2014

Peeled Text Transforms

This pen shows text that looks like it is peeled of the page. It has a smooth animation when hovered.
Автор: Michiel Bijl
Ноябрь 25, 2014

Text-Mask Background Moving On MouseMove

Trying the new feature «background-clip: text», with background moving.
Автор: Robert Borghesi
Сентябрь 23, 2014

Typography Text Neon

Text design (typography) with neon effect.
Автор: Prima Utama Apriansyah
Март 6, 2014

Demo Image: 3D Quote Rotator3D вращение

3D Quote Rotator

Using GreenSock and the SplitText plugin to create a 3D text effect.
Автор: Nate Wiley
Ноябрь 9, 2015

Rotating Text

HTML, CSS and JavaScript rotating text.
Автор: Rachel Smith
Май 14, 2015

Vertically Rotating Text

Vertically rotating text with HTML and CSS.
Автор: Jacob
Июль 23, 2014

Тени

Тени

Pretty Shadow

Pretty shadow with HTML and CSS.
Автор: Alex Moore
Август 24, 2016

Second Shadow

Styling text with SVG.
Автор: Code School
Апрель 21, 2016

Variable Longshadow With Gradients Mixin

«Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.» This doesn’t need to exist. But now you can define long shadows with different colors and spreads with one Sass mixin.
Автор: Dario Corsi
Апрель 15, 2016

Shadow Parallax

Move your Mouse and Play words. Written by React, ES6, Babel transpiler.
Автор: Siamak Mokhtari
Январь 9, 2016

Awesome Text-Shadow

Awesome text-shadow with CSS3.
Автор: Nguyen Hoang Nam
Февраль 9, 2015

Text-Shadow

HTML and CSS text-shadow.
Автор: Майur Elbhar
Ноябрь 13, 2014

CSS Text Shadow

Taking a stab at a Lynda.com tutorial. CSS: Advanced Typographic Techniques using lettering.js
Автор: Chris Eisenbraun
Сентябрь 30, 2014

Long Shadow Gradient Mixin

A Sass (Scss) Mixin to quickly generate long shadow gradients. Suitable for both ‘text-shadow’ and ‘box-shadow’.
Автор: roikles
Май 20, 2014

CSS3 Text-Shadow Effects

HTML and CSS3 text-shadow effects.
Автор: Jorge Epuñan
Январь 14, 2014

CSS Dashed Shadow

Pure css hipster-ish typographic dashed shadow.
Автор: Lucas Bebber
Ноябрь 8, 2013

Demo Image: Typed TextПечать (набор) текста

Typed Text

HTML, CSS and JavaScript typed text.
Автор: Alex
Январь 11, 2017

Auto Typing Text

Auto typing text with HTML, CSS and JavaScript.
Автор: Connor Gaunt
Ноябрь 8, 2016

LOVE Text Effect

Scrambled text effect inspired by the award winning Science Fiction film «LOVE».
Автор: Matthew Wagerfield
Ноябрь 2, 2016

Kinetic Type With Greensock

Kinetic Type with HTML, CSS and JavaScript (Greensock).
Автор: Nerdmanship
Октябрь 14, 2016

Text Scramble Effect

A little text decoding/scramble effect.
Автор: Justin Windle
Июль 6, 2016

Transmission: Glowing Text Animation

A little glowing text animation. First, some JS to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.
Автор: Stephen Scaff
Июнь 25, 2016

Futuristic Resolving/Typing Text Effect feat. GLaDOS

Futuristic resolving/typing text effect usually found in game or movie cut scenes to reveal text on screen.
Автор: Kevin
Ноябрь 28, 2015

Text Typing Thingamy

HTML, CSS and JavaScript text typing thingamy.
Автор: Jack Armley
Май 22, 2015

SVG Text: Animated Typing

HTML, CSS and SVG animated typing.
Автор: Tiffany Rayside
Февраль 12, 2015

Typing Text With Javascript

Typing text with HTML, CSS and Javascript.
Автор: Max
Май 19, 2014

 
Источник перевода: 61 CSS Text Effects

CC BY-NC 4.0 61 CSS-эффект для текста, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.


9 нравится это

CSS эффекты для украшения ваших проектов

Продолжаем подборку эффектов для оживления вашего сайта. Первые части подборки можно посмотреть здесь и здесь. В данной части вы найдёте разнообразные эффекты переходов, трансформаций и анимаций.

Dsheiko – эффекты Css3 переходов

Содержит такие эффекты как fade, blur, jalousie, scroll, ladder, zoom и другие. Работают во всех современных браузерах, вы можете добавить их на свой сайт очень просто и быстро.

free-css3-transition-effectsfree-css3-transition-effects

DownloadDemo

Анимация переходов для страниц на Css3

Коллекция креативных переходов для страниц, может использоваться для создания интересных эффектов навигации, наприер, изменение перспективы, 3д трансформация или слайдер.

 

PageTransitionsPageTransitions

DownloadDemo

 

Effeckt.css – простые эффекты переходов

Очередная библиотека анимаций и переходов.

 

free-css3-transition-effectsfree-css3-transition-effects

DownloadDemo

Perspective – Css3 эффект перехода

Этот эффект хорошо подходит для оформления изображений

perspective01perspective01

DownloadDemo

Card Flip – Css3 переход

Стильный 3d эффект переворачивающихся карт.

card-flip01card-flip01

DownloadDemo

Css3 3D трансформация

Попробуйте эту интересную анимацию для вращения элементов на странице.

transforms01transforms01

DownloadDemo

Cube – Css3 эффект перехода

Создайте 3D объект на вашем сайте.

cube02cube02


DownloadDemo

Призмы Css3

AЭффект похож на предыдущий, только вместо куба используется призма.

box02box02

DownloadDemo

Css3 карусель

3D анимация для изображений

carousel01carousel01

DownloadDemo

Интересные эффекты с CSS3 переходами

Переходы бордеров.

free-css3-transition-effectsfree-css3-transition-effects

DownloadDemo

Css3 – эффект увеличения

Простой эффект, который подходит как для изображений так и для текста.

free-css3-transition-effectsfree-css3-transition-effects

DownloadDemo

 

Эффект перелистывания на чистом CSS3

Действительно крутой эффект при наведении.

free-css3-transition-effectsfree-css3-transition-effects

DownloadDemo

 

Css3 эффект зеркала

free-css3-transition-effectsfree-css3-transition-effects

DownloadDemo

 

CSS эффект размытия

Можно использовать на страницах портфолио.

free-css3-transition-effectsfree-css3-transition-effects

DownloadDemo

Источник

реализация анимации с помощью SVG и CSS

Развлекаемся с эффектами при наведении на ссылку

От автора: дизайнер, с которым я работаю, представил на недавнем собрании команды свой проект. Она проделала замечательную работу, объединив концепцию системы дизайна, компоненты, шаблонов и все, что между ними, и это сделало бы любого стороннего разработчика счастливым.

Но в ее работе был, на мой взгляд, крошечный нюанс: эффекты при наведении на ссылку были странными.

Развлекаемся с эффектами при наведении на ссылку

Ссылка по умолчанию (сверху) и эффект наведения (внизу)

Ха! Я не только не видел такого раньше, эта идея никогда не приходила мне в голову. Оказывается, есть много примеров этого на реальных сайтах, один из которых — The Outline. Именно эта идея вдохновила дизайнера.

Развлекаемся с эффектами при наведении на ссылку

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Круто, подумал я. Мы можем сделать что-то вроде линейного фонового градиента или даже фонового изображения. Но! Это не все. Оказывается, этот эффект анимирован. Опять же, на The Outline:

Развлекаемся с эффектами при наведении на ссылку

Снимок экрана из статьи The Outline

Вау! Это довольно дико. Я не был уверен, как подойти к этому, честно говоря, потому что анимация для любой из моих первоначальных идей будет сложной, особенно по части кросс-браузерной поддержки.

Итак, как это сделали The Outline? Оказывается, это SVG. Мы можем сделать крутой контур и анимировать его довольно просто:

Но как это работает со ссылкой? Ну, мы можем использовать SVG для свойства background-image:

Но это немного не то, потому что мы не можем его анимировать. Для этого нам нужны лучшие решения. Тем не менее, мы можем встроить CSS непосредственно в SVG, в свойство background-image. Мы не можем просто скопировать и вставить SVG-код в свойство, но с помощью определенного кода это возможно:

И поскольку SVG может содержать собственные стили в разметке, анимация может быть передана прямо в свойство background-image, так же, как мы делаем это с помощью CSS в заголовке HTML-документа или встроенного CSS в HTML.

Мы можем немного изменить стили:

Развлекаемся с эффектами при наведении на ссылку

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это вдохновляет!

Я понятия не имею, хорошо ли влияет такая яркая анимация на опыт пользователя, и, честно говоря, не в этом суть этого поста. Дело в том, что у The Outline появилась забавная идея с реализацией CSS.

Это заставило меня задуматься о других нестандартных (возможно, даже нетрадиционных) стилях наведения, которые мы можем создать. Опять же, не рассматривая юзабилити. а только проводя захватывающие эксперименты с CSS…

Эффекты границы, переходящей в фон

Возможно, та же самая нижняя граница ссылки по умолчанию может растягиваться и становиться фоном ссылки при наведении:

Черт, мы можем сделать что-то подобное горизонтально:

Эффект обведенного текста

Давайте уберем цвет шрифта и оставим только контур.

Эффект увеличивающегося текста

Другая идея — увеличить текст при наведении:

Эффект изменяющегося шрифта

Это так непрактично, что это заставляет меня улыбнуться, так почему бы нет:

Эффект «Появись, Крис»

Прости, Крис. Я думаю, тебе это понравится.

Что вы еще можете придумать?

Есть идеи? Дайте мне знать в комментариях, и я отправлю их в коллекцию CodePen, которую я начал.

Автор: Geoff Graham

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Развлекаемся с эффектами при наведении на ссылку

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Развлекаемся с эффектами при наведении на ссылку

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

8 простых эффектов с использованием свойства CSS3 Transition | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! CSS3 внёс бесчисленные количество новшеств для дизайнеров, и большинство из них очень легки в применении. Достаточно описать пару строк кода, что даст вам удивительный анимационный эффект, который будет на загляденье всем посетителям и поспособствует их активности на сайте. В этой статье рассмотрим 8 простых эффектов с использованием CSS3 свойства — Transition. Если вам нужен красивый и функциональный сайт, сделанный с использованием современных технологий, то не задумывайтесь — обратитесь к специалистам http://stfalcon.com/en/services/web-development. Они помогут вам реализовать любой сложный проект.

Поддержка браузеров

На текущий момент CSS3 Transition поддерживается множеством браузеров. Более подробно Вы можете узнать об этом здесь.
CSS3 Transition - поддержка браузеров

Подготовка

Все далее описанные анимационные эффекты выполнены на блоке DIV. Итак, для начала опишем базовые свойства для блока:

1
2
3
4
5
6
7
8

.experiment
{
    width:400px;
    height:200px;
    background:#676470;
    /* главное свойство */
    transition:all 0.3s ease;
}

Значение свойства Transition состоит и 3 составляющих: transition-property — all, transition-duration — 0.3s и третьей величины, transition-timing-function — ease, также есть еще одна составляющая (transition-delay далее в таблице).

НаименованиеОписаниеЗначение
transition-propertyСвойство, к которому применяем анимациюПрактически любое свойство CSS: color, background, width, font-size и т.д. all — все свойства.
transition-durationДлительность анимацииВремя в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-functionВременная функция, используемая для анимацииease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delayЗадержка анимацииВремя в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Теперь переходим к эффектам.

1. Затемнение

Затемнение или осветление элементов на странице — довольно популярный способ обратить внимание посетителей на что-либо. Данный эффект кодируются в два этапа: во-первых, установить начальное состояние; Затем нужно задать изменение, например при наведении курсора:

1
2
3
4
5
6
7
8

.fade
{
    opacity:0.5;
}
.fade:hover
{
    opacity:1;
}

Далее живой пример:

Наведи

2. Смена цвета

Еще один из наиболее популярных эффектов — смена цвета элемента:

1
2
3
4

.color:hover
{
    background:#53a7ea;
}

Наведи

3. Внутренняя граница

Один из самых часто используемых стилей для кнопок при наведении это появление границы кнопки. Мы можем, добавить рамку (border) к элементу, но это повлечет изменение размера элемента и как следствие положения — что не есть хорошо. Конечно, данную проблему можно решить, однако куда проще использовать тень внутри элемента.

1
2
3
4

.border:hover
{
    box-shadow: inset 0 0 0 20px #53a7ea;
}

Наведи

4. Изменение формы

Еще одним из часто используемых эффектов является изменение формы элемента, например прямоугольник в овал и тд. С помощью CSS, выполнить это очень просто, достаточно описать класс для наведения и задать отличное от первоначального значение свойства border-radius.

1
2
3
4

.circle:hover
{
    border-radius:50%;
}

Наведи

5. Увеличение и уменьшение

Переходим к более интересным эффектам. Чтобы увеличить элемент, нам придется изменить его ширину и высоту. В этом на поможет свойство CSS3 Transform.

1
2
3
4
5
6

.grow:hover
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

Наведи

Уменьшение элемента выполняется так же просто, как и увеличение. Чтобы увеличить элемент мы указываем значение больше 1, чтобы уменьшить его, мы указываем значение меньше 1:

1
2
3
4
5
6

.shrink:hover
{
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

Наведи

6. Поворот

CSS3 Transform имеют целый ряд различных вариантов использования, один из лучших — поворот элемента:

1
2
3
4
5
6

.rotate:hover
{
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}

Наведи

7. 3D тень

Не так давно стало популярно использовать в дизайне веб-сайтов 3D тени на ряду с Flat дизайном. Сам же эффект тени и выпуклости достигается за счет плавного смещения элемента по горизонтали и добавления тени. Примерно вот так:

1
2
3
4
5
6
7
8
9

.threed:hover
{
    box-shadow:
           1px 1px #53a7ea,
           2px 2px #53a7ea,
           3px 3px #53a7ea;
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
}

Наведи

8. Колебание

На последок пожалуй самый сложный из представленных вариант реализации анимации с помощью CSS3. Будет выполнен целый комплекс действий над элементом, и все это благодаря правилу @keyframes, и свойствам animation и animation-iteration. Сначала описываем анимацию CSS свойств (используем для Chrome префикс -webkit):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

Эта анимация просто перемещает элемент влево и вправо:

1
2
3
4
5
6
7

.swing:hover
{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

Наведи


На этом всё. Конечно все выше представленные эффекты не полноценные (не готовы для рабочего применения), однако прекрасные для понимания того, что и с помощью CSS теперь можно выполнять над элементами веб-страницы различные действия для создания «живого сайта».

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *