1

CSS3 Анимация контента

 

Быстрый старт

Примеры анимации Download!
 

На этой странице вы узнаете, как сделать 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>