На этой странице вы узнаете, как сделать css анимацию кнопки, текста, блока, картинки, анимацию появления, познакомитесь с примерами применения анимации.
Подключите файл "css3-animated.js" в подвале вашего сайта, а между тегами hed файл стилей "animations.css".
После того, вы можете просто определить «animatedParent» как родительский класс, который будет вызывать «анимированный» дочерний класс для выбранной вами анимации.
<div class='animatedParent'> <h2 class='animated bounceInDown'>It Works!</h2> </div>
В этом примере мы используем «bounceInDown». Click here Кликните здесь, чтобы увидеть пример всех CSS-анимаций.
Эта библиотека CSS-анимации использует новейшие методы аппаратного ускорения, чтобы обеспечить бесперебойную её работу.
Sequencing
Если вы хотите, чтобы набор анимаций запускался один за другим, вы можете установить время последовательности в мс, используя «data-sequence», а затем определить порядок с помощью «data-id».
<div class='animatedParent' data-sequence='500'> <h2 class='animated bounceInDown' data-id='1'>It Works!</h2> <h2 class='animated bounceInDown' data-id='2'>This animation will start 500ms after</h2> <h2 class='animated bounceInDown' data-id='3'>This animation will start 500ms after</h2> </div>
Offset
Offset сделает так, чтобы CSS-анимация запускалась до или после того, как она войдет в область просмотра с указанной суммой пикселей. Поэтому, если вы хотите, чтобы CSS-анимация запустилась только после того, как пользователь прокрутит её на 300 пикселей, то напишите -300 пикселей.
<div class='animatedParent'data-appear-top-offset='-300'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
Animate Once
Добавление этого элемента гарантирует, что анимация запустится только один раз при просмотре страницы сайта и не будет перезапущена если вновь попадёт в область просмотра после выхода из неё.
<div class='animatedParent animateOnce'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
Animation Speed
Вы можете указать 4 скорости развития анимации - медленно, ещё медленней и очень медленно (slow, slower and slowest.).
<div class='animatedParent'>
<h2 class='animated bounceInDown slowest'>It Works!</h2>
</div>
Delay (Новинка)
Теперь вы можете добавить отдельные задержки к вашей анимации (обратитесь к файлу css анимации, чтобы увидеть все доступные режимы).
<div class='animatedParent'>
<h2 class='animated bounceInDown delay-250'>It Works!</h2>
</div>
On Click Toggle
Теперь вы можете вызывать анимацию с событием при нажатии. (нажмите на кнопку, чтобы увидеть пример).
Обратите внимание, что цель будет анимироваться только при просмотре, если вы поместите ее в анимированный родительский класс. Если это не так, анимация будет срабатывать только при нажатии.
<input type='button' class='animatedClick' data-target='clickExample'> <h2 class='animated bounceInDown clickExample fadeOutDown'>It Works!</h2>
On Click With Sequencing
Позволяет запускать набор анимаций один за другим при клике.
<input type='button' class='animatedClick' data-target='clickExample' data-sequence='500'> <h2 class='animated bounceInDown clickExample fadeOutDown' data-id='1'>It Works!</h2> <h2 class='animated bounceInDown clickExample fadeOutDown' data-id='2'>It Works!</h2>
IE Fix
Обратите внимание, что анимация не будет работать в браузерах IE9 или более старых. Этот код исправит эту неприятность.
Поместите его под ссылкой на animations.css между тегами "hed" вашего сайта.
<!--[if lte IE 9]> <link href='/PATH/TO/FOLDER/css/animations-ie-fix.css' rel='stylesheet'> <![endif]-->
Примеры CSS3 анимации
bounceIn
<h2 class='animated bounceIn'>It Works!</h2>
bounceInDown
<h2 class='animated bounceInDown'>It Works!</h2>
bounceInRight
<h2 class='animated bounceInRight'>It Works!</h2>
bounceInUp
<h2 class='animated bounceInUp'>It Works!</h2>
bounceInLeft
<h2 class='animated bounceInLeft'>It Works!</h2>
fadeInDownShort (New!)
<h2 class='animated fadeInDownShort'>It Works!</h2>
fadeInUpShort (New!)
<h2 class='animated fadeInUpShort'>It Works!</h2>
fadeInLeftShort (New!)
<h2 class='animated fadeInLeftShort'>It Works!</h2>
fadeInRightShort (New!)
<h2 class='animated fadeInRightShort'>It Works!</h2>
fadeInDown
<h2 class='animated fadeInDown'>It Works!</h2>
fadeInUp
<h2 class='animated fadeInUp'>It Works!</h2>
fadeInLeft
<h2 class='animated fadeInLeft'>It Works!</h2>
fadeInRight
<h2 class='animated fadeInRight'>It Works!</h2>
fadeIn
<h2 class='animated fadeIn'>It Works!</h2>
growIn
<h2 class='animated growIn'>It Works!</h2>
shake
<h2 class='animated shake'>It Works!</h2>
shakeUp
<h2 class='animated shakeUp'>It Works!</h2>
rotateIn
<h2 class='animated rotateIn'>It Works!</h2>
rotateInUpLeft
<h2 class='animated rotateInUpLeft'>It Works!</h2>
rotateInDownLeft
<h2 class='animated rotateInDownLeft'>It Works!</h2>
rotateInUpRight
<h2 class='animated rotateInUpRight'>It Works!</h2>
rotateInDownRight
<h2 class='animated rotateInDownRight'>It Works!</h2>
rollIn
<h2 class='animated rollIn'>It Works!</h2>
wiggle
<h2 class='animated wiggle'>It Works!</h2>
swing
<h2 class='animated swing'>It Works!</h2>
tada
<h2 class='animated tada'>It Works!</h2>
wobble
<h2 class='animated wobble'>It Works!</h2>
pulse
<h2 class='animated pulse'>It Works!</h2>
lightSpeedInRight
<h2 class='animated lightSpeedInRight'>It Works!</h2>
lightSpeedInLeft
<h2 class='animated lightSpeedInLeft'>It Works!</h2>
flip
<h2 class='animated flip'>It Works!</h2>
flipInX
<h2 class='animated flipInX'>It Works!</h2>
flipInY
<h2 class='animated flipInY'>It Works!</h2>
