CSS Animations

CSS Анимации

CSS - Animations (Plan)

Анимация

последовательное изменение свойств объекта, создающее эффект движения или своеобразное оживление интерфейса

CSS-анимации (animations)

позволяют анимировать элементы средствами CSS без использования JavaScript

Реализация

Правило @keyframes

@keyframes имя анимации { список правил }

@keyframes

устанавливает ключевые кадры, которые определяют какие свойства на каком шаге будут анимированы

            @keyframes animation-name {
              from { свойство } /* Из какого состояния */
              to { свойство } /* К какому прийти */
            }
        

animation-name

определяет список применяемых к элементу анимаций

        selector {
          animation-name: name;
        }
    

animation-name: <параметры>

• none — отменяет анимацию элемента
• <имя анимации> [,<имя анимации>]* — указывается одна или несколько анимаций, которые будут применены к элементу

animation-duration

задает длительность анимации

        selector {
          animation-duration: 3s;
          animation-name: name;
        }
    

animation-duration: <параметры>

• <время> [,<время>]* — задается в "s" или "ms"

Подробнее про @keyframes

Временная шкала (TimeLine)

• border-radius: 0;
• border-radius: 25%;
• border-radius: 50%;

Установка ключевых кадров

            @keyframes animation-name {
              0% { свойство }
              20% { свойство }
              40% { свойство }
              60% { свойство }
              100% { свойство }
            }
        

Группировка ключевых кадров

        @keyframes animation-name {
          0%, 50% {
            свойство
          }
          100% { свойство }
        }
    

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

animation-iteration-count

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

        selector {
          animation-iteration-count: 3;
          animation-duration: 2s;
          animation-name: name;
        }
    

animation-iteration-count: <параметры>

• <число> — анимация проигрывается заданное количество раз
  • при 0 — анимация проигрывается мгновенно
• infinite — анимация будет выполняться бесконечно

animation-delay

устанавливает задержку перед началом выполнения анимации

        selector {
          animation-delay: 1s;
          animation-duration: 3s;
          animation-name: name;
        }
    

animation-delay: <параметры>

• <время> [,<время>]* — задается в "s" или "ms"

animation-direction

определяет направление проигрывания анимации

        selector {
          animation-direction: reverse;
          animation-duration: 3s;
          animation-name: name;
        }
    

animation-direction: <параметры>

• normal — анимация проигрывается в обычном направлении, от начала до конца
• reverse — анимация проигрывается в обратном направлении, с конца до начала

[Свойства, зависимые от количества проигрываний анимации]

• alternate — нечётные проигрывания воспроизводятся в прямом направлении, а чётные — в обратном.
• alternate-reverse — нечётные проигрывания воспроизводятся в обратном направлении, а чётные — в прямом

animation-fill-mode

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

        selector {
          animation-fill-mode: forwards;
          animation-duration: 3s;
          animation-name: name;
        }
    

animation-fill-mode: <параметры>

• forwards — элемент сохраняет конечное состояние анимации, т. е. свойства, записанные в последнем ключевом кадре будут применены к элементу после завершения анимации

animation-fill-mode: <параметры>

• backwards — свойства описанные в первом ключевом кадре, будут сразу применены к элементу еще до начала проигрывания анимации, даже при установленной задержке перед началом проигрывания анимации

animation-fill-mode: <параметры>

• both — объединяет в себе свойства forwards и backwards, т. е. до начала анимации элементу присваивается состояние первого ключевого кадра, а после завершения — конечное состояние анимации сохраняется

animation-fill-mode: <параметры>

• none — анимация не будет применять какие-либо стили к элементу как до, так и после проигрывания анимации

animation-fill-mode: <параметры>

P.S. Поведение параметров зависит от значений направления и количества проигрываний анимации

animation-timing-function

определяет скорость и ускорение изменения значений свойств между ключевыми кадрами во время проигрывания анимации

        selector {
          animation-timing-function: ease-in-out;
          animation-duration: 2s;
          animation-name: name;
        }
    

animation-timing-function: <параметры>

animation-play-state

устанавливает состояние анимации, т. е. анимация проигрывается или стоит на паузе

        selector {
          animation-play-state: running;
          animation-duration: 2s;
          animation-name: name;
        }
    

animation-play-state: <параметры>

• paused — анимация стоит на паузе
• running — анимация проигрывается

animation

Универсальная запись всех свойств, относящихся к CSS-анимациям

        selector {
          animation: name 2s ease 0s 5 reverse forwards; 
        }
    

animation: <параметры>

• none — отменяет анимацию
• порядок записи свойств:
  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state

Полезные ссылки:

• Animate.css — билиотека, со многи количеством интересных анимаций
• Animista.net — сервис, в котором собрано большое количество интересных анимаций
• Magic Animations CSS3 — библиотека, с интересными анимациями