В предыдущей главе мы разобрали, как создавать простые анимации, такие как переход из одного состояния в другое с помощью 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-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в виде чисел, длин, процентов или цветов, является анимируемым.

Список всех анимируемых свойств есть в Списки анимируемых свойств в 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%;}
}

Если какое-либо значение отсутствует или не указано, вместо него будет использоваться значение по умолчанию для этого свойства. Это означает, что если значение свойства animation-duration отсутствует, переход не произойдет, поскольку его значение по умолчанию равно 0.

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

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

Значение Описание
animation Сокращенное свойство для установки всех свойств анимации в одном объявлении.
animation-name Задает имя анимации, определенной @keyframes, которая должна применяться к выбранному элементу.
animation-duration Определяет, сколько секунд или миллисекунд требуется анимации для завершения одного цикла анимации.
animation-timing-function Определяет, как анимация будет развиваться в течение каждого цикла, то есть функции замедления.
animation-delay Определяет задержку перед началом анимации.
animation-iteration-count Определяет, сколько раз цикл анимации должен быть воспроизведен перед остановкой.
animation-direction Определяет, должна ли анимация воспроизводиться в обратном порядке при чередующихся циклах.
animation-fill-mode Определяет, как CSS-анимация должна применять стили к своей цели до и после ее выполнения.
animation-play-state Указывает, запущена ли анимация или приостановлена.
@keyframes Указывает значения для свойств анимации в различных точках во время анимации.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.