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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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