Эффекты анимации для блоков на CSS3 и ANIMATE.CSS
Скачать [ZIP] [4 КБ]
Очень неплохая библиотека, которая позволит анимировать с различными эффектами любые элементы на сайте
Для начала посмотрите ДЕМО
Моё тестирование в редакторе: КЛИК
Ссылка на GitHub: ПЕРЕЙТИ
Установка:
1#: В самый верх вашего CSS вставьте:
|
1 |
@import url('/css/animate.css') all; |
2#: HTML код примера использования:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<div id="apotestcss" class="hinge infinite animated">IMAPO.RU - Уникальные скрипты</div> <!-- Список эффектов: bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp --> |
hinge - это эффект, который применён к элементу
infinite - указывает на то, что анимация будет бесконечной
animated - указывает на то, что элемент нужно анимировать
Дополнительно можно указать нужному нам элементу параметры скорости анимации, задержку и то, будет ли анимация бесконечна. Пример:
|
1 2 3 4 5 |
#id_элемента { animation-duration: 3s; // Скорость анимации animation-delay: 2s; // Задержка до анимации animation-iteration-count: infinite; // Повторение анимации } |
Осталось лишь залить CSS файл из прикреплённого архива в папку css
