CSS Анимация

CSS Анимации

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

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

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

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

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

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

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

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

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

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

Правило @keyframes

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

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

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

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

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

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

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

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

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

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

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

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

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

Свойство animation-iteration-count указывает количество запусков анимации.

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

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

Запуск анимации в обратном направлении или поочередно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3 Упражнения

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

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

<body>
  <div>Это div</div>
</body>

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

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