Картинка - Остались вопросы?
Остались вопросы?
Напишите нам и мы поможем подобрать тариф именно для Вас!

[CSS] Анимация

Основные классы

Добавьте к элементу класс atumquiz-animate-animated вместе с любым классом анимации (допишите префикс к классу atumquiz-animate-):

<div class="atumquiz-animate-animated atumquiz-animate-bounce">Пример</div>
Пример

Привлекающее внимание

  • bounce
  • flash
  • pulse
  • rubberBand
  • shakeX
  • shakeY
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • heartBeat

Заднее появление

  • backInDown
  • backInLeft
  • backInRight
  • backInUp

Заднее исчезновение

  • backOutDown
  • backOutLeft
  • backOutRight
  • backOutUp

Прыгающее появление

  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp

Прыгающее исчезновение

  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp

Угасающее появление

  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeInTopLeft
  • fadeInTopRight
  • fadeInBottomLeft
  • fadeInBottomRight

Угасающее исчезновение

  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • fadeOutTopLeft
  • fadeOutTopRight
  • fadeOutBottomRight
  • fadeOutBottomLeft

Сальто

  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY

Скорость света

  • lightSpeedInRight
  • lightSpeedInLeft
  • lightSpeedOutRight
  • lightSpeedOutLeft

Вращающиеся появление

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

Вращающиеся исчезновение

  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

Специальные предложения

  • hinge
  • jackInTheBox
  • rollIn
  • rollOut

Увеличивающее появление

  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp

Увеличивающее исчезновение

  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

Скользящее появление

  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp

Скользящее исчезновение

  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Вспомогательные классы

Задержка

Класс устанавливает длительность анимации во времени за один цикл.

<div class="atumquiz-animate-animated atumquiz-animate-bounce atumquiz-animate-delay-2s">Пример</div>
Класс Задержка
.atumquiz-animate-delay-1s 1s
.atumquiz-animate-delay-2s 2s
.atumquiz-animate-delay-3s 3s
.atumquiz-animate-delay-4s 4s
.atumquiz-animate-delay-5s 5s
:root{
	--atumquiz-animate-delay: 2s;
}

Продолжительность

Классы устанавливают время продолжительности анимации.

<div class="atumquiz-animate-animated atumquiz-animate-bounce atumquiz-animate-faster">Пример</div>
Класс Продолжительность
.atumquiz-animate-slow 2s
.atumquiz-animate-slower 3s
.atumquiz-animate-fast 800ms
.atumquiz-animate-faster 500ms
:root{
	--atumquiz-animate-duration: 2s;
}

Повтор

<div class="atumquiz-animate-animated atumquiz-animate-bounce atumquiz-animate-repeat-2">Пример</div>
Класс Повтор
.atumquiz-animate-repeat-1 1
.atumquiz-animate-repeat-2 2
.atumquiz-animate-repeat-3 3
.atumquiz-animate-infinite Бесконечно
:root{
	--atumquiz-animate-repeat: 2;
}