Анимация в 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
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nisi placeat non sunt atque deserunt cum blanditiis assumenda vitae!
animation-ping
animation-spin
animation-pulse
Для её использования достаточно просто указать 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>