[CSS] Анимация
Для того чтобы оживить ваш квиз мы подготовили анимации для создание приятного и удобного использование формы-квиз, и чтобы вы могли легко реализовать свои задумки мы внедрили библиотеку: Animate.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;
}