ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Анимации


CSS Анимации

CSS позволяет сделать анимацию HTML-элементов без использования JavaScript или Flash!

CSS

В этой главе вы узнаете о следующих свойствах:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Браузерная поддержка анимации

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Специальные браузерные префиксы

Некоторым старым браузерам нужны специальные префиксы (-webkit-) для понимания свойств анимации:

Пример

div {
  width: 100px;
  height: 100px;
  background-color: red;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Стандартный синтаксис */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
Попробуйте сами »

Что такое CSS анимация?

Анимация позволяет элементу постепенно переходить от одного стиля к другому.

Вы можете изменить столько свойств CSS, сколько захотите, и столько раз, сколько хотите.

Чтобы использовать CSS-анимацию, сначала необходимо указать несколько ключевых кадров для анимации.

Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.


Правило @keyframes (ключевые кадры)

Когда вы задаете стили CSS внутри правила @keyframes анимация постепенно изменится с текущего стиля на новый в определенные моменты времени.

Чтобы анимация работала, вы должны привязать её к элементу.

В следующем примере анимация "example" связывается с элементом <div>. Анимация будет длиться 4 секунды и постепенно изменит цвет фона элемента <div> с красного - "red" на желтый - "yellow":

Пример

/* Код анимации */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Элемент, к которому применяется анимация */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
Попробуйте сами »

Примечание: Свойство animation-duration свойство определяет, сколько времени анимация должна занять для завершения. Если свойство animation-duration не указано, анимация не будет выполняться, поскольку значение по умолчанию равно 0s (0 секунд).

В приведенном выше примере мы указали, когда стиль изменится, используя ключевые слова "от" и "до" (что соответствует 0% (начало) и 100% (завершение)).

Также можно использовать проценты. Используя проценты, вы можете добавлять столько стилей, сколько хотите.

В следующем примере будет изменен цвет фона элемента <div>, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:

Пример

/* Код анимации */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* Элемент, к которому применяется анимация */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
Попробуйте сами »

Следующий пример изменит цвет фона и положение элемента <div>, когда анимация завершена на 25%, завершена на 50%, и снова, когда анимация завершена на 100%:

Пример

/* Код анимации */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Элемент, к которому применяется анимация */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
Попробуйте сами »

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

Свойство animation-delay указывает задержку начала анимации.

В следующем примере перед запуском анимация задерживается на 2 секунды:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}
Попробуйте сами »

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

В следующем примере анимация запустится так, как если бы она уже воспроизводилась в течение 2 секунд:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}
Попробуйте сами »

Установите, сколько раз анимация должна запускаться

Свойство animation-iteration-count указывает, сколько раз анимация должна запускаться.

В следующем примере анимация будет запущена 3 раза до ее остановки:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}
Попробуйте сами »

В следующем примере используется значение "infinite" (бесконечно), чтобы анимация продолжалась постоянно:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
Попробуйте сами »

Запустите анимацию в обратном направлении или альтернативных циклах

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

Свойство animation-direction может иметь следующие значения:

  • normal - Анимация воспроизводится как обычно (вперед). Это по умолчанию
  • reverse - Анимация воспроизводится в обратном направлении (назад)
  • alternate - Сначала анимация воспроизводится вперед, затем назад
  • alternate-reverse - Сначала анимация воспроизводится в обратном направлении, затем вперед

В следующем примере анимация будет запущена в обратном направлении (назад):

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}
Попробуйте сами »

В следующем примере используется значение "alternate", чтобы сначала запустить анимацию вперед, а затем назад:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}
Попробуйте сами »

В следующем примере используется значение "alternate-reverse", чтобы сначала запустить анимацию назад, а затем вперед:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}
Попробуйте сами »

Укажите кривую скорости анимации

Свойство animation-timing-function задает кривую скорости анимации.

Свойство animation-timer-function может иметь следующие значения:

  • ease - Определяет анимацию с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию)
  • linear - Определяет анимацию с одинаковой скоростью от начала до конца
  • ease-in - Определяет анимацию с медленным стартом
  • ease-out - Определяет анимацию с медленным окончанием
  • ease-in-out - Определяет анимацию с медленным началом и окончанием
  • cubic-bezier(n,n,n,n) - Позволяет определить свои собственные значения в функции кубического Безье

В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:

Пример

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Попробуйте сами »

Укажите режим заполнения для анимации

CSS-анимация не влияет на элемент перед воспроизведением первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство animation-fill-mode может переопределить это поведение.

Свойство animation-fill-mode определяет стиль для целевого элемента, когда анимация не воспроизводится (до ее запуска, после ее завершения или в обоих случаях).

Свойство animation-fill-mode может иметь следующие значения:

  • none - Значение по умолчанию. Анимация не будет применять какие-либо стили к элементу до или после его выполнения
  • forwards - Элемент сохранит значения стиля, установленные последним ключевым кадром - зависит от animation-direction (направления анимации) и animation-iteration-count (итеративного подсчета анимации)
  • backwards - Элемент получит значения стиля, заданные первым ключевым кадром - зависит от animation-direction (направления анимации), и сохранит его в течение периода animation-delay (задержки анимации)
  • both - Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях.

В следующем примере элемент <div> сохраняет значения стиля из последнего ключевого кадра после окончания анимации:

Пример

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
Попробуйте сами »

В следующем примере элемент <div> получает значения стиля, установленные первым ключевым кадром, до начала анимации (в течение периода задержки анимации):

Пример

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}
Попробуйте сами »

В следующем примере элемент <div> получает значения стиля, установленные первым ключевым кадром до начала анимации, и сохраняет значения стиля из последнего ключевого кадра после завершения анимации:

Пример

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}
Попробуйте сами »

Сокращенные свойства анимации

В приведенном ниже примере используются шесть свойств анимации:

Пример

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
Попробуйте сами »

Тот же эффект анимации, что и выше, может быть достигнут с помощью свойства сокращения animation:

Пример

div {
  animation: example 5s linear 2s infinite alternate;
}
Попробуйте сами »


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

В следующей таблице перечислены правила @keyframes и все свойства CSS-анимации.:

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