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

• animation-fast — время анимации 0.4 секунды
• animation-slow — время анимации 1.5 секунд

Attention! Attention! (animation-infinite)

<ul class="column-count5 column-count1-tablet">
    <li><code>animation-fade</code></li>
    <li><code>animation-fadeout</code></li>
    <li><code>animation-zoom</code></li>
    <li><code>animation-zoomout</code></li>
    <li><code>animation-left</code></li>
    <li><code>animation-top</code></li>
    <li><code>animation-right</code></li>
    <li><code>animation-bottom</code></li>
    <li><code>animation-bounce</code></li>
    <li><code>animation-rotatein</code></li>
    <li><code>animation-rotateout</code></li>
</ul>

<div class="b-flex flex-wrap gap10">
    <button class="button" onclick="demo('animation-fade')">fade</button>
    <button class="button" onclick="demo('animation-fadeout')">fadeout</button>
    <button class="button" onclick="demo('animation-zoom')">zoom</button>
    <button class="button" onclick="demo('animation-zoomout')">zoomout</button>
    <button class="button" onclick="demo('animation-left')">left</button>
    <button class="button" onclick="demo('animation-right')">right</button>
    <button class="button" onclick="demo('animation-top')">top</button>
    <button class="button" onclick="demo('animation-bottom')">bottom</button>
    <button class="button" onclick="demo('animation-bounce')">bounce</button>
    <button class="button" onclick="demo('animation-rotatein')">rotatein</button>
    <button class="button" onclick="demo('animation-rotateout')">rotateout</button>
</div>

<div class="overflow-hidden mar10-t">
    <div id="demo" class="pad40 bordered bg-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nisi placeat non sunt atque deserunt cum blanditiis assumenda vitae!</div>
</div>

<script>
function demo(aClass) {
    var box = document.getElementById('demo');
    box.classList.remove('animation-fade', 'animation-fadeout', 'animation-left', 'animation-top', 'animation-right', 'animation-bottom', 'animation-zoom', 'animation-zoomout', 'animation-bounce', 'animation-rotatein', 'animation-rotateout');
    box.classList.add(aClass);
}
</script>

<div class="mar40-tb b-flex gap30">
    <div><code>animation-ping</code> <span class="animation-ping bg-primary600 w30px h30px b-inline mar30-l"></span></div>
    <div><code>animation-spin</code> <span class="animation-spin bg-primary600 w30px h30px b-inline mar30-l"></span></div>
    <div><code>animation-pulse</code> <span class="animation-pulse bg-primary600 w30px h30px b-inline mar20-l"></span></div>
</div>

<hr>

<div class="column-count5 column-count1-tablet">
    <code>animation-delay1s</code>
    <code>animation-delay2s</code>
    <code>animation-delay3s</code>
    <code>animation-delay4s</code>
    <code>animation-delay5s</code>
</div>

<hr>

<ul>
    <li><code>animation-fast</code> — время анимации 0.4 секунды</li>
    <li><code>animation-slow</code> — время анимации 1.5 секунд</li>
</ul>

<hr>

<p><span class="b-inline animation-zoom animation-infinite animation-slow">Attention!</span> <span class="mar20-l b-inline animation-bounce animation-infinite animation-slow">Attention! (<code>animation-infinite</code>)</span></p>