Логотип Berry CSSBerry CSS 4.2

Анимация

CSS-анимация задаётся через классы:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nisi placeat non sunt atque deserunt cum blanditiis assumenda vitae!

Анимация может иметь задержку выполнения от 1 до 5 секунд. За это отвечают классы:

Скорость анимации по умолчанию 0.6 секунды. Это можно изменить с помощью классов:

Бесконечная анимация задаётся с помощью класса 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>