Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

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

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

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

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

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

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

Property
@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

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

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

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

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

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


Правило @keyframes

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

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

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

Пример

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

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

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

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

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

Пример

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

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

Пример

/* The animation code */
@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;}
}

/* The element to apply the animation to */
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;
}

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

Пример

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-timing-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 - Элемент сохранит значения стиля, установленные последним ключевым кадром (зависит от направления анимации и количества итераций анимации).
  • backwards- Элемент получит значения стиля, установленные первым ключевым кадром (зависит от направления анимации), и сохранит их в течение периода задержки анимации.
  • 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;
}

Проверьте себя с помощью упражнений

Упражнение:

Добавьте двухсекундную анимацию для элемента <div>, которая меняет цвет с красного на синий. Назовите анимацию «пример».

<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: ;
  : 2s;
}

@keyframes example {
  from {: red;}
  to {: blue;}
}
</style>

<body>
  <div>This is a div</div>
</body>


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

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

Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation