CSS анимация

Использование CSS-анимации для оживления HTML-страницы при помощи правила @keyframes и свойства animation.

Создание ключевых кадров с помощью правила @keyframes

Синтаксис @keyframes с двумя ключевыми кадрами выглядит следующим образом

@keyframes myAnimation_name {
  from {
    css-свойство: значение;
  }
  to {
    css-свойство: значение;
  }
}

Пример

@keyframes myAnime {
  from {
    color: #435673;
  }
  to {
    color: #140783;
    margin-left: 30px;
  }
}

from - начальная точка, to - конечный результат

Синтаксис @keyframes с тремя и более ключевыми кадрами выглядит в процентном соотношении

@keyframes myAnimation_name {
  0% {
    css-свойство: значение;
  }
  55% {
    css-свойство: значение;
	}
  100% {
    css-свойство: значение;
  }
}

Так же можно комбинировать и объединять кадры

@keyframes myAnimation_name {
  from, 70% {
    css-свойство: значение;
  }
  55% {
    css-свойство: значение;
    css-свойство: значение;
	}
  to, 20% {
    css-свойство: значение;
  }
}

Правило @keyframes создано, теперь его можно использовать в свойстве animation

Использование созданной анимации

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

div {
  animation: название_анимации длительность скорость задержка повтор направление; 
}
.myElement {
  animation: myAnimation_name 2.5s linear 5s infinite alternate-reverse;
}

Пример CSS анимации

See the Pen CSS3-animation by Nikolay (@Only-to-top) on CodePen.

В развёрнутом виде анимация выглядит следующим образом

div {
  animation-name: название анимации;
  animation-duration: длительность;
  animation-timing-function: скорость;
  animation-delay: задержка;
  animation-iteration-count: повтор; 
  animation-direction: направление;
}
.myElement {
  animation-name: myAnimation_name;
  animation-duration: 2.5s;
  animation-timing-function: linear;
  animation-delay: 5s;
  animation-iteration-count: infinite; 
  animation-direction: alternate-reverse;
}

Для работы анимации достаточно двух значений: animation-name (название анимации) и animation-duration (её длительность). Остальные значения будут использованы по умолчанию.

Длительность анимации animation-duration

Задаётся в секундах или миллисекундах (s / ms)

animation-duration: 13.5s

Скорость проигрывания анимации animation-timing-function

Существуют и другие варианты проигрывания анимации, которые можно создать самому, используя функцию cubic-bezier(). Но в большинстве случаев хватает стандартных вариантов использования.

animation-timing-function: ease-in-out

Задержка до начала анимации animation-delay

Задаётся в секундах или миллисекундах (s / ms). Значение по умолчанию - 0.

animation-delay: 6.5s

Повторение анимации animation-iteration-count

Задаётся с помощью целых положительных чисел: 1 - одно повторение, 2 - два, и т.д. Значение по умолчанию - 1. Для бесконечного проигрывания анимации - infinite.

animation-iteration-count: 6

Направление для анимации animation-direction