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

Определение ключевых кадров 

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

@keyframes colorchange
{
    /* individual keyframes go here */
}

Мы назвали этот набор «colorchange» (изменение цвета). Название не имеет значения, только старайтесь сделать его понятным, чтобы его можно было легко найти и отличить.

После этого определяем отдельные ключевые кадры в процентах от продолжительности этой анимации:

@keyframes colorchange
{
    0%   { background-color: #00F; /* from: blue */ }
    25%  { background-color: #F00; /* red */ }
    50%  { background-color: #0F0; /* green */ }
    75%  { background-color: #F0F; /* purple */ }
    100% { background-color: #00F; /* to: blue */ }
}

Хотя мы задаем только цвет фона, можно задать любое количество свойств CSS, которые можно анимировать.

0% — это начальный ключевой кадр, вместо него можно использовать ключевое слов from. 100% — конечный ключевой кадр, вместо него можно использовать ключевое слово to. Обычно нужно задать хотя бы два ключевых кадра, но если элемент, которому задаются ключевые кадры, по умолчанию синего цвета, можно пропустить определение ключевых кадров начала и конца, т. е.:

@keyframes colorchange
{
    25%  { background-color: #F00; /* red */ }
    50%  { background-color: #0F0; /* green */ }
    75%  { background-color: #F0F; /* purple */ }
}

Можно определить и 101 ключевой кадр между 0% и 100%. Хотя можно определить и гораздо больше, используя доли процентов, такие как 12,3%, но если Ваши анимации такие сложные, Вы напрашиваетесь на неприятности.

И, наконец, нужно повторить весь блок с приставкой производителя Webkit для браузеров Chrome, Safari и Opera, начиная с 15 версии:

@-webkit-keyframes colorchange
{
    0%   { background-color: #00F; /* from: blue */ }
    25%  { background-color: #F00; /* red */ }
    50%  { background-color: #0F0; /* green */ }
    75%  { background-color: #F0F; /* purple */ }
    100% { background-color: #00F; /* to: blue */ }
}

Этот код лучше поместить выше кода без приставок производителя.

Применение анимаций к элементам 

Теперь можно применить эти ключевые кадры к любому количеству элементов, чтобы увидеть, как это работает. Следующие разделы используют стандартные свойства, но не забывайте также включить версию с приставкой производителя -webkit.

Название анимации

Свойство animation-name определяет набор анимаций с ключевыми кадрами с каким названием будет применен, т. е., чтобы использовать этот набор ключевых кадров под названием «colorchange», мы запишем следующий код:

#myelement
{
    animation-name: colorchange;
}

Продолжительность анимации

Как и свойство transition-duration, свойство animation-duration задает продолжительность анимации в секундах s или миллисекундах ms, тысячных долях секунды. Следующие продолжительности одинаковы:

#myelement p.one
{
    animation-duration: 3s;
}
#myelement p.two
{
    animation-duration: 3000ms;
} 

Временная характеристика анимации

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

• ·      ease — задано по умолчанию, анимация начнется медленно, затем быстро ускорится. Дойдя до средины, она замедлится и будет замедляться до полной остановки.
• ·      ease-in-out — подобно предыдущей, но с менее выраженными ускорением и замедлением.
• ·      ease-in — начинается медленно, но ускоряется и останавливается резко.
• ·      ease-out — начинается быстро, но замедляется до остановки.
• linear — постоянная скорость на всей продолжительности анимации, часто наилучший выбор для изменения цвета или прозрачности.

И, наконец, у нас есть функция cubic-bezier, позволяющая задать собственные уникальные временные характеристики. Для подробного описания обратитесь к уроку «Временная функция Безье».

Задержка анимации

Как и свойство transition-delay, animation-delay определяет период в секундах s или миллисекундах ms до момента начала перехода. Следующие значения одинаковы:

#myelement p.one
{
    animation-delay: 0.5s;
}
#myelement p.two
{
    animation-delay: 500ms;
}

Счетчик повторений анимации

Свойство animation-iteration-count определяет, сколько раз анимация будет воспроизведена. По умолчанию это один раз, но можно задать любое положительное целочисленное значение, ноль или отрицательное целочисленное значение означает, что анимация никогда не будет проиграна. Или можно использовать ключевое слово infinite, чтобы анимация проигрывалась бесконечно.

#myelement p.one
{
    animation-iteration-count: 5;
}
#myelement p.two
{
    animation-iteration-count: infinite;
} 

Направление анимации

Свойство animation-direction определяет, как будет повторяться анимация. Следующие ключевые слова могут быть использованы:

• normal — значение по умолчанию, проигрывает ключевые кадры анимации вперед от 0% до 100%.
• reverse — проигрывает ключевые кадры назад, от 100% к 0%.
• alternate — проигрывает ключевые кадры вперед, затем назад и так по кругу.
• alternate-reverse — как предыдущее значение, но сначала воспроизводится обратный порядок ключевых кадров.

Сокращенное объявление CSS 

Давайте рассмотрим полное объявление анимации:

#myelement
{
    animation-name: colorchange;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Довольно много кода, особенно учитывая еще и версию с приставками производителя -webkit. Но можно использовать сокращение animation, чтобы задать все 6 значений в порядке, показанном выше:

#myelement
{
    -webkit-animation: colorchange 5s linear 1s infinite alternate;
    animation: colorchange 5s linear 1s infinite alternate;
}

Посмотрите демонстрацию работы этой анимации.

Это только пример, постарайтесь изменить его для своих анимаций.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Цикл уроков об анимациях CSS3. Часть 1. Основы. Что такое анимации?
• Цикл уроков о переходах CSS3. Часть 3. Временная функция Безье
• Цикл уроков о переходах CSS3. Часть 2: Основы свойств переходов
• Цикл уроков о переходах CSS3, часть 1: Основы. Что такое переходы?