Руководство по анимациям в CSS3

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

CSS3-анимации делают на основе ключевых кадров (@keyframes), которые позволяют указывать изменения CSS-свойств с течением времени. Создание CSS-анимации представляет собой двухэтапный процесс:

1. Первым шагом построения CSS-анимации является определение отдельных ключевых кадров и присвоение им названия с объявлением ключевых кадров.
2. Вторым шагом является обращение к ключевым кадрам по имени с использованием свойства animation-name, а также добавление продолжительности анимации animation-duration и других необязательных свойств анимации для управления ее поведением.

Однако порядок их объявления не важен. В следующем примере показано, как анимировать блок <div> по горизонтали из одной позиции в другую, используя функцию CSS3-анимации.

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

Вы должны указать как минимум два свойства animation-name и animation-duration (больше 0), чтобы анимация работала. Все остальные свойства анимации являются необязательными, так как их значения по умолчанию не предотвращают анимацию.

Список всех анимируемых свойств есть в Списки анимируемых свойств в CSS.

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

Ключевые кадры используются для указания значений свойств анимации на разных этапах анимации. Ключевые кадры указываются с использованием специального CSS-правила — @keyframes.

Селектор ключевого кадра для правила ключевого кадра начинается с процента (%) или ключевого слова from (0%) до to (100%). 0% представляет начальную точку анимации, 100% представляет конечную точку, 50% представляет среднюю точку и т. д.

.box {
    width: 50px;
    height: 50px;
    margin: 100px;
    background: red;
    position: relative;
    left: 0;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: shakeit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: shakeit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}
 
/* Standard syntax */
@keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}

Сокращенное свойство animation

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

CSS-свойство animation является сокращенным свойством для animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode и animation-play-state.

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 2s linear 0s infinite alternate;
    /* Standard syntax */
    animation: repeatit 2s linear 0s infinite alternate;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}

Свойства анимации CSS3

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