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

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

1. Правило @keyframes

CSS3-анимация состоит из двух компонентов: сначала идет объявление@keyframes, которое затем используется в свойстве animation элемента. Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени. Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

Синтаксис

    @-webkit-keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}
@keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}

Теперь, объявив @keyframes, мы можем ссылаться на него в свойстве animation:

    h1 {
font-size: 3.5em;
color: darkmagenta;
-webkit-animation: shadow  2s infinite ease-in-out;
animation: shadow  2s infinite ease-in-out;
}

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

Синтаксис

    div {
    -webkit-animation-name: mymove;
    animation-name: mymove;
    }

3. Длительность анимации

Свойство устанавливает длительность анимации, например:

animation-duration: 1s;. 

Синтаксис

    div {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}

4. Временная функция

Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задается при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2). Не наследуется.

Синтаксис

div {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}

ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier()

5. Анимация с задержкой

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

Синтаксис

div {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}

Пример

6. Повтор анимации

Свойство позволяет запустить анимацию несколько раз. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется.

Синтаксис

    div {
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
}

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

Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.

Синтаксис

div {
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

8. Краткая запись анимации

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation, перечислив их через пробел:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

9. Проигрывание анимации

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

 h1:hover {animation-play-state: paused;} 

Синтаксис

div:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

10. Состояние элемента до и после воспроизведения анимации

Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.

Синтаксис

    div {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

11. Множественные анимации

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

    div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}

Поддержа браузерами