Анимация
CSS-анимация задаётся через классы:
animation-fade
animation-fadeout
animation-zoom
animation-zoomout
animation-left
animation-top
animation-right
animation-bottom
animation-bounce
animation-rotatein
animation-rotateout
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nisi placeat non sunt atque deserunt cum blanditiis assumenda vitae!
Анимация может иметь задержку выполнения от 1 до 5 секунд. За это отвечают классы:
animation-delay1s
animation-delay2s
animation-delay3s
animation-delay4s
animation-delay5s
Скорость анимации по умолчанию 0.6 секунды. Это можно изменить с помощью классов:
animation-fast
— время анимации 0.4 секундыanimation-slow
— время анимации 1.5 секунд
Бесконечная анимация задаётся с помощью класса animation-infinite
:
Attention! Attention!
<span class="b-inline animation-zoom animation-infinite animation-slow">Attention!</span> <span class="b-inline animation-bounce animation-infinite animation-slow">Attention!</span>
Для того, чтобы анимация не выходила за пределы блока, используется дополнительный контейнер:
<div class="overflow-hidden"> <div class="animation-right animation-slow bg-gray100 pad20"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nisi placeat non sunt atque deserunt cum blanditiis assumenda vitae! </div> </div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nisi placeat non sunt atque deserunt cum blanditiis assumenda vitae!
Использование анимации совместно с WOW.js
Библиотека используется для создания анимации при скроллинге страницы. Как только блок с классом wow
окажется видимым, сработает анимация. В параметрах WOW.js можно указать дистанцию (offset) в пределах которой сработает скрипт.
<script src="assets/wow.min.js"></script> <script> wow = new WOW({offset: 100}); wow.init(); </script> <h2 class="wow animation-left">Заголовок</h2> <p class="wow animation-right">Lorem ipsum dolor sit amet.</p> <p class="wow animation-zoom">Lorem ipsum dolor sit amet.</p>