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