CSS Keyframes и Transition - разбор полетов
Вчера я закончил работу над дизайном для сайта обзоров, и в процессе верстки макета мне захотелось поэкспериментировать с анимацией. Сей эксперимент, разумеется, удовлетворил заказчика, получилось очень красиво, но я сильно разочаровался в разработчиках браузеров.
Начнем, пожалуй, с "Великого взрыва".
Keyframes намного лучше в плане настроек, но, к великому сожалению, он пока поддерживается только в webkit-браузерах, а именно: в семействе Chromium, Safari и в новых версиях Opera. Возможно, последние версии других браузеров уже поддерживают keyframes, но у меня он поддерживался только в Google Chrome.
У Transition же мало возможностей, но из соображений кроссбраузерности лучше использовать это. К тому же, вкупе с JavaScript можно добиться возможностей Keyframes.
Я думаю, достаточно болтовни, пора начать практику. Итак, давайте создадим простейшую keyframes-анимацию.
Анимация готова. Теперь применим ее к нашему элементу, заодно рассмотрим все свойства анимации:
Итог:
А теперь разберем transition. Создадим необходимые стили:
Итог:
Осталось неизвестным только метод расчета промежуточных значений.
Промежуточные значения определяются кривыми Безье 3 порядка, в которых:
Координаты промежуточных точек P1 и P2 задаются четырьмя значениями в порядке (x1,y1,x2,y2). Координаты принимают значения от 0 до 1. Доступные значения:
На этом все, спасибо за прочтение статьи. Ваше мнение, а так же какие-либо дополнения вы можете оставить в комментариях.
Keyframes - анимация, меняющая стили определенное кол-во времени и определенное кол-во раз. Анимация может выполняться независимо от каких-либо условий (наведения, фокуса и др.), но можно ее использовать и при каких-либо условиях.
Transition - свойство, которое дает плавность в изменении какого-либо свойства при наведении, фокусе и т.д. В отличие от keyframes, transition нужно указать событие (наведение, фокус и др.), но так же, как и keyframes, выполняется за определенное кол-во времени.
Transition - свойство, которое дает плавность в изменении какого-либо свойства при наведении, фокусе и т.д. В отличие от keyframes, transition нужно указать событие (наведение, фокус и др.), но так же, как и keyframes, выполняется за определенное кол-во времени.
Keyframes намного лучше в плане настроек, но, к великому сожалению, он пока поддерживается только в webkit-браузерах, а именно: в семействе Chromium, Safari и в новых версиях Opera. Возможно, последние версии других браузеров уже поддерживают keyframes, но у меня он поддерживался только в Google Chrome.
У Transition же мало возможностей, но из соображений кроссбраузерности лучше использовать это. К тому же, вкупе с JavaScript можно добиться возможностей Keyframes.
Разбираем Keyframes
Я думаю, достаточно болтовни, пора начать практику. Итак, давайте создадим простейшую keyframes-анимацию.
Код
@-webkit-keyframes 'changebg' {
from {background:red;} // Начальный фон - красный.
50% {background:green;} // В середине мы поменяем цвет на зеленый.
to {background:blue;} // А в конце на синий.
}
from {background:red;} // Начальный фон - красный.
50% {background:green;} // В середине мы поменяем цвет на зеленый.
to {background:blue;} // А в конце на синий.
}
Анимация готова. Теперь применим ее к нашему элементу, заодно рассмотрим все свойства анимации:
Код
div {
background:red;
-webkit-animation-name:'changebg'; // Название нашей анимации.
-webkit-animation-duration:10s; // За 10 секунд пройдет один цикл анимации. Причем за первые 5 секунд цвет будет меняться с красного на зеленый, а оставшиеся 5 на синий.
-webkit-animation-delay:5s; // Анимация начнется через 5 секунд после загрузки страницы.
-webkit-animation-iteration-count:2; // Количество циклов анимации. Для бесконечного цикла используйте значение "infinite".
-webkit-animation-direction:alternate; // Направление анимации. Первый цикл: красный-зеленый-синий. Второй цикл: синий-зеленый-красный. И так далее. По умолчанию это свойство имеет значение "normal", при котором анимация воспроизводится только в прямом порядке.
-webkit-animation-play-state:running; // Анимация не стоит на паузе. "running" - значение по умолчанию, "paused" - анимация стоит на паузе.
-webkit-animation-timing-function:ease; // Метод расчета промежуточных значений определяется по кривой Безье 3-го порядка с координатами P1(0.25, 0.1) P2(0.25, 1.0). Об этом мы поговорим подробнее позже о transition.
}
background:red;
-webkit-animation-name:'changebg'; // Название нашей анимации.
-webkit-animation-duration:10s; // За 10 секунд пройдет один цикл анимации. Причем за первые 5 секунд цвет будет меняться с красного на зеленый, а оставшиеся 5 на синий.
-webkit-animation-delay:5s; // Анимация начнется через 5 секунд после загрузки страницы.
-webkit-animation-iteration-count:2; // Количество циклов анимации. Для бесконечного цикла используйте значение "infinite".
-webkit-animation-direction:alternate; // Направление анимации. Первый цикл: красный-зеленый-синий. Второй цикл: синий-зеленый-красный. И так далее. По умолчанию это свойство имеет значение "normal", при котором анимация воспроизводится только в прямом порядке.
-webkit-animation-play-state:running; // Анимация не стоит на паузе. "running" - значение по умолчанию, "paused" - анимация стоит на паузе.
-webkit-animation-timing-function:ease; // Метод расчета промежуточных значений определяется по кривой Безье 3-го порядка с координатами P1(0.25, 0.1) P2(0.25, 1.0). Об этом мы поговорим подробнее позже о transition.
}
Итог:
1 действие: Ожидание 5 секунд.
2 действие: Объект меняет фон с красного на зеленый в течение 5 секунд.
3 действие: Объект меняет фон с зеленого на синий в течение 5 секунд.
4 действие: Объект меняет фон с синего на зеленый в течение 5 секунд (Т.к. animation-direction имеет значение "alternate").
5 действие: Объект меняет фон с синего на красный в течение 5 секунд.
2 действие: Объект меняет фон с красного на зеленый в течение 5 секунд.
3 действие: Объект меняет фон с зеленого на синий в течение 5 секунд.
4 действие: Объект меняет фон с синего на зеленый в течение 5 секунд (Т.к. animation-direction имеет значение "alternate").
5 действие: Объект меняет фон с синего на красный в течение 5 секунд.
Разбираем Transition
А теперь разберем transition. Создадим необходимые стили:
Код
div {
background:red;
-webkit-transition:background 0.3s ease; // Для Webkit и новых версий Opera
-moz-transition:background 0.3s ease; // Для Firefox
-o-transition:background 0.3s ease; // Для старых версий Opera
-ms-transition:background 0.3s ease; // Для IE
// Если вы хотите, чтобы transition работал для всех свойств, поменяйте в его значении "background" на "all"
}
div:hover {
background:green;
}
background:red;
-webkit-transition:background 0.3s ease; // Для Webkit и новых версий Opera
-moz-transition:background 0.3s ease; // Для Firefox
-o-transition:background 0.3s ease; // Для старых версий Opera
-ms-transition:background 0.3s ease; // Для IE
// Если вы хотите, чтобы transition работал для всех свойств, поменяйте в его значении "background" на "all"
}
div:hover {
background:green;
}
Итог:
До наведения: Фон красный
Во время наведения: Фон становится зеленым за 0.3 секунды.
После наведения: Фон краснеет за 0.3 секунды
Во время наведения: Фон становится зеленым за 0.3 секунды.
После наведения: Фон краснеет за 0.3 секунды
Метод расчета промежуточных значений
Осталось неизвестным только метод расчета промежуточных значений.
Промежуточные значения определяются кривыми Безье 3 порядка, в которых:
Начальная точка: P0(0,0);
Конечная точка: P3(1,1);
Конечная точка: P3(1,1);
Координаты промежуточных точек P1 и P2 задаются четырьмя значениями в порядке (x1,y1,x2,y2). Координаты принимают значения от 0 до 1. Доступные значения:
ease: P1(0.25, 0.1); P2(0.25, 1.0).
linear: P1(0.0, 0.0); P2(1.0, 1.0).
ease-in: P1(0.42, 0); P2(1.0, 1.0).
ease-out: P1(0, 0); P2(0.58, 1.0).
ease-in-out P1(0.42, 0); P2(0.58, 1.0).
cubic-bezier(x1,y1,x2,y2): P1(x1,y1); P2(x2,y2), где x1,x2,y1 и y2 - произвольные числа от 0 до 1.
linear: P1(0.0, 0.0); P2(1.0, 1.0).
ease-in: P1(0.42, 0); P2(1.0, 1.0).
ease-out: P1(0, 0); P2(0.58, 1.0).
ease-in-out P1(0.42, 0); P2(0.58, 1.0).
cubic-bezier(x1,y1,x2,y2): P1(x1,y1); P2(x2,y2), где x1,x2,y1 и y2 - произвольные числа от 0 до 1.
На этом все, спасибо за прочтение статьи. Ваше мнение, а так же какие-либо дополнения вы можете оставить в комментариях.
Мне нравится 6
Просмотры: 2583 · Комментарии: 2 · Добавил: Kelin · Категория: Статьи по HTML и CSS