Анимация

Animation CSS

Синтаксис

animation: animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state || [none | animation-name] .primer { animation: primer 2s infinite; }

Значение по умолчанию

• animation-name: none; - имя, связанное с правилом последовательности движения @keyframes
  • none - нет анимации.
  • идентификатор "_az0-9", кроме слов: none, unset, inherit, initial.
• animation-duration: 0s; - время в секундах (.3s) или миллисекундах (300ms), сколько должен длиться один цикл анимации.
• animation-timing-function: ease; - функции времени
  • ease - начинается медленно, затем ускоряется и к концу опять замедляется (0.25,0.1,0.25,1).
  • linear - одинаковая скорость от начала и до конца.
  • steps(<число>, start | end) - cтупенчатая функция.
    • число - шагов больше нуля.
    • start — задаёт полунепрерывную снизу функцию.
    • end — задаёт полунепрерывную сверху функцию.
  • ease-in - медленно начинается, к концу ускоряется (0.42,0,1,1).
  • ease-out - быстро начинается, к концу замедляется (0,0,0.58,1).
  • ease-in-out - медленно начинается и заканчивается (0.42,0,0.58,1).
  • step-start - конечное значение, анимации нет.
  • step-end - находятся в начальном значении заданное время, затем сразу же принимают конечное значение. Как таковой анимации нет.
  • cubic-bezier - функцию движения в виде кривой Безье cubic-bezier(0.25,0.1,0.25,1).
• animation-delay: 0s; - время ожидания перед запуском цикла анимации.
• animation-iteration-count: 1; - сколько раз проигрывать цикл.
  • infinite - повторяется бесконечно.
  • число - количкство повторений, от 0 до бесконечности, например полцикла 0.5.
• animation-direction: normal; - направление движения цикла анимации.
  • normal - с самого начала и резко возвращается.
  • alternate - с начала до конца и плавно возвращается (туда-сюда).
  • reverse - с конца, до резко возвращается.
  • alternate-reverse - с конца до начала и плавно возвращается.
• animation-fill-mode: none; - определяет стили, когда анимация не проигрывается по завершению или при остановке.
  • none - не применяются.
  • forwards - последнего ключевого кадра.
  • backwards - первого ключевого кадра.
  • both - оба правила: forwards и backwards.
• animation-play-state: running; - поставить на паузу или проигрывать с того момента где была остановлена.
  • running - проигрывать анимацию.
  • paused - поставить на паузу.

Ключевые кадры анимации свойства элемента (прозрачность, цвет, положение и другие) переход значений стилевых свойств из исходного в конечное состояние.

@keyframes <переменная> { [ from | to | <проценты> ] [, from | to | <проценты> ]* }

@keyframes animation-name { from { left: 0; } 50% { left: 100px; } to { left: 300px; } } где значения:

переменная - уникальное название анимации, которая связывает ключевые кадры @keyframes с другими параметрами анимации в animation.

from или 0% - первый ключевой кадр.

to или 100% - последний ключевой кадр.

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