Magic CSS3 Animations

Magic CSS3 Animations — это библиотека крутых кросс-браузерных анимаций, которые можно использовать на своем проекте в качестве привлечения внимания на каком либо момонте.

Как установить Magic CSS3 Animations.

Шаг 1.

Скачаваем архив с библиотекой. Загружаем его на свой проект и подключаем файл перед закрывающим тегом </head>

<link rel="stylesheet" href="yourpath/magic.min.css">

Шаг 2.

Для необходимого блока добавляем класс основной класс magictime и класс самой анимации, например puffIn. В итоге должно получится так

<div class="magictime puffIn">Ваш блок</div>

Если вы хотите подключить через JS появление анимации через определенное время, подключите код перед закрывающим </body>, где 5000 - задержка появления анимации в мс

function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setTimeout(myFunction, 5000);

Если вы хотите загрузить анимацию через определенное время, но с бесконечным циклом, вы можете использовать этот пример:

function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setInterval(myFunction, 3000);