Анимация допустима для любого свойства CSS, физическое положение, размеры, угол или цвет которого могут быть изменены. Использовать базовую анимацию на основе ключевых кадров очень легко.
Ключевые кадры CSS-анимации задаются с помощью директивы @keyframes. Ключевой кадр — это просто состояние элемента в одной точке на временной шкале анимации. CSS-анимация будет автоматически интерполировать анимационные ключевые кадры. Нужно лишь указать состояние свойств CSS в начальной и конечной точках анимации.
Как только все положения ключевых кадров настроены (часто указываются в процентах), всё, что нужно сделать, — это установить значения по умолчанию для исходного элемента, который вы хотите анимировать.
Затем создайте именованную анимацию, используя формат @keyframes имяАнимации { }, в котором будут храниться все ключевые кадры.
Наконец, создайте специальный класс, который станет определять продолжительность, направление, повторяемость и динамику вашей анимации и связывать его с тем же именем анимации, которое использовалось директивой @keyframes .
Общий синтаксис.
@keyframes nameOfAnimation {
keyframe_selectorA {
property1: value1a;
property2: value2b;
}
keyframe_selectorB {
property1: value1b;
property2: value2b;
}
}
В анимации могут использоваться ключевые слова from и to, которым соответствуют значения 0% и 100%.
Задавать свойства анимации можно отдельно или сразу в одной строке.
#animated {
animation-name: slidedown;
animation-duration: 200ms;
animation-timing-function: ease-in;
animation-delay: 50ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: normal;
animation-play-state: running;
}
#animated {
animation: 200ms ease-in 50ms 1 normal running forwards slidedown;
}
При создании @keyframes анимации очень часто на определённых этапах у отдельных свойств используются одни и те же значения. Чтобы не растягивать длинный список из контрольных точек, можно просто записать их через запятую.
@keyframes pulse {
0%, 50% {font-size: 10px;}
25%, 100% {font-size: 20px;}
}
На данный момент поддержка составляет более 89.5%, и во всех браузерах @keyframes и свойство animation работают без префиксов. Тем не менее, для обратной поддержки Safari 8 и iOS 8.4 и ниже вам придётся использовать префикс –webkit.
Для начала самый простой пример - поменять цвет у фигуры.
<style>
div.square {
width: 100px;
height: 100px;
background: green;
}
@keyframes changeSquareColor {
0% { background: green; }
100% { background: red; }
}
.square:hover {
animation: changeSquareColor 3s infinite ease;
}
</style>
<div class="square"></div>
Мы задали свойства квадрата и задали ему фоновый цвет. Далее в @keyframes задали начальное значение цвета (снова зелёный), а конечное значение - красный цвет. Анимацию запустим при наведении курсора мыши (:hover). В animation указываем имя созданной анимации changeSquareColor и задаём время анимации (3 секунды) и парочку других параметров.
Вы можете добавить промежуточный цвет. Таких шагов может быть много.
@keyframes changeSquareColor {
/* первый шаг */
0% {
background: green;
}
/* второй шаг */
50% {
background: magenta;
}
/* третий шаг */
100% {
background: red;
}
}
Если изменение цвета недостаточно, можно добавить изменение формы фигуры.
Комбинация box-shadow и keyframes даёт замечательный эффект подсветки формы, когда элемент оказывается в фокусе. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:
@keyframes pulse {
0% {
box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
}
50% {
box-shadow: 0 0 20px rgba(200, 50, 50, 0.9);
}
100% {
box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
}
}
form input[type="text"]:focus {
animation: pulse 1.5s infinite ease-in-out;
}
Сделаем пример анимации перемещения — при наведении на мячик он начинает прыгать.
#ball {
width: 60px;
height: 60px;
border-radius: 30px;
background: #f00;
position: absolute;
bottom: 0;
}
Создадим ключевые кадры:
@keyframes bounce {
0% { bottom: 0; }
50% { bottom: 100px; }
100% { bottom: 0; }
}
Сначала мы задаём имя анимации — «bounce». Затем мы описываем ключевые кадры анимации:
Создаём анимацию:
#ball:hover {
animation: bounce 1s infinite ease;
}
К примеру, нам нужно, чтобы анимация длилась одну секунду с задержкой в 4 секунды перед повтором.
Свойство animation-delay не поможет. Свойство задерживает первый старт анимации, после чего она выполняется непрерывно.
Для решения задачи нужно воспользоваться математикой. Нужно, чтобы анимация длилась одну секунду, затем сделать задержку в 4 секунды между итерациями, в сумме получается 5 секунд.
.mover {
animation: move 5s infinite;
}
Теперь наша @keyframes-анимация будет длиться 5 секунд:
@keyframes move {
/* что-то произойдет за эти 5 секунд */
}
Чтобы анимация длилась 1 секунду, нужно вносить изменения каждую 1/5 времени или 20%.
@keyframes move {
0% {
transform: translate(0, 0);
}
/* Закончите все действия к этому моменту */
20% {
transform: translate(200px, 0);
}
/* Между 20% и 100% ничего не происходит */
100% {
transform: translate(200px, 0);
}
}
Можно сократить код, так как значение 0% заранее подразумевается, а этапы анимации можно перечислить через запятую:
@keyframes move {
20%, 100% {
transform: translate(200px, 0);
}
}
Демо
See the Pen Keyframe with Animation Delay Between Iterations by Chris Coyier (@chriscoyier) on CodePen.
Свойство animation является сокращённой записью восьми свойств: