САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

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 Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

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

CSS3 Адаптивный дизайн

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

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

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

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS3 Анимация



CSS3 Анимации

CSS3 анимации позволяют анимировать большинство HTML элементов без использования JavaScript или Flash!

CSS3

Поддержка браузера анимации

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

Номер, за которыми следуют -webkit-,-moz-, или -o- указывает первую версию, которая работает с префиксом.

Свойство
@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

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

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

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

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

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


Правило @keyframes

При указании стилей CSS3 внутри правила @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 секунд).

В приведенном выше примере мы указали, когда стиль изменится с помощью ключевых слов "from" и "to" (что составляет 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;}
}

/* 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;
}
Редактор кода »

Следующий пример использует значение 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-timing-function может иметь следующие значения:

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

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

Пример

#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;}
Редактор кода »

Указать режим заливки анимации

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

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

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

  • none - Значение по умолчанию. Анимации не будет применять любые стили к элементу до или после его выполнения
  • 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;
}
Редактор кода »

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

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

Пример

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;
}
Редактор кода »


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

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

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