Сегодня хочется рассказать о том, как добавить на свой сайт анимацию наподобие вот этой:
Этот текст анимирован. Анимация повторится 12 раз.
Если Вам хочется, чтобы Ваш сайт ожил и привлекал больше внимания – применяйте анимацию, сделанную с помощью обычных таблиц стилей. Слава Богу CSS3 уже может очень многое. И применить все это к своему сайту не так сложно.
Особенно если Ваш сайт самописный.
Итак прежде всего нужно скачать файл, который находится здесь
На этой же странице Вы сможете посмотреть как будет выглядеть та или иная анимация и выбрать для себя тот вариант, который будет наиболее лучше подходить под Ваши задачи.
После этого необходимо прикрепить файл стилей на Вашу страницу или сайт и создать блок <div> с идентификатором.
Свойства которого прописать уже в собственных стилях.
Например так:
#text_animate {
animation:bounceIn 2s 3;
-webkit-animation:bounceIn 4s 10;
}
Где #text_animate – название идентификатора, animation:bounceIn 2s 3; — указывает на свойство animation, выбранную анимацию bounceIn, время в секундах сколько будет анимация работать и последняя цифра указывает на количество повторений этой самой анимации.
Более подробно я рассказываю все в этом не большом видеоуроке. Посмотрите его и если есть вопросы – пишите их в комментариях. Разберем все подробно.
Удачи Вам!
