Анимация в Berry CSS

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

• animation-fade
• animation-fadeout
• animation-zoom
• animation-zoomout
• animation-left
• animation-top
• animation-right
• animation-bottom
• animation-bounce
• animation-rotatein
• animation-rotateout

Для её использования достаточно просто указать css-класс, например:

<h3 class="animation-fade">Lorem ipsum dolor sit amet</h3>

Анимация может иметь задержку выполнения от 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>

Использование анимации совместно с WOW.js

Библиотека используется для создания анимации при скроллинге страницы. Как только блок с классом wow окажется видимым, сработает анимация. В параметрах WOW.js можно указать дистанцию (offset) в пределах которой сработает скрипт.

<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>

<script src="assets/wow.min.js"></script>
<script>
	wow = new WOW({offset: 100}); 
	wow.init();
</script>