Подобные просьбы и вопросы - будут игнорироваться!
Animate.css - CSS3 Библиотека для создания анимации
CSS улучшилось многими функциями, которые делают веб-разработку намного интереснее.
Одна из этих функций, эффекты анимации на CSS3. До этого, чтобы создать анимацию, вы должны были работать только с Javascript.
Но теперь вы можете легко создать анимацию с помощью CSS3.
Animate.css - это готовая к использованию библиотека для эффектов анимации.
Эта библиотека предоставляет вам более 50 различных анимационных эффектов, которые работают стабильно на большинстве браузеров с поддержкой CSS3.
Так же вы можете применить анимацию на свой текст, изображения, формы и так далее.
Скачать полную библиотеку, вы можете с нашего сайта.
Приступая К Работе
С Animate.css, все, что вам нужно сделать, это включить соответствующие классы элементов. Чтобы приступить к работе, необходимо, подключить библиотеку animate.css файл в <head>...</head>.
По умолчанию, Animate.css будет воспроизводиться только один раз при первой загрузке страницы. Затем он останется статичным. Чтобы быть в состоянии контроля анимации, нам потребуется немного Javascript.
В этом вопросе, мы подключим jQuery, вот так:
<head>
...
<link rel="stylesheet" type="text/css" media="all" href="/css/animate.css">
<script type="text/javascript" src="/jquery-latest.min.js"></script>
...
</head>
HTML-Разметка
Для приминения различного эффекта анимации вы должны добавить .animated класс элемента, тот который вы хотите анимировать:
Пример: ( wobble ) и будет наш класс эффекта анимации.
<div class="option animated wobble">Этот текст будет анимировать</div>
Анимация будет осуществляться только на странице загрузки, так что вам, возможно, также потребуется использовать Javascript, чтобы применить анимацию на триггер события.
В .option также могут быть настроены в соответствии с вашими потребностями.
Дополнительные Параметры CSS
Анимация, как мы определили ранее, будет воспроизводиться только один раз и по предварительно определенной продолжительности и времени задержки.
Если вам нужно больше продолжительности или времени задержки, то вот как это можно настроить.
Пусть цикла анимации может производиться от нескольких раз и до бесконечности, вы можете использовать атрибут animation-iteration-count.
Убедитесь также, что имеются префиксы webkit, moz, и др. Чтобы сделать его бесконечным, нужно добавить infinite, как и значение.
Если же вам нужно, чтобы повторялась анимация только несколько раз, просто введите значение числом, которое вы хотите.
-vendor-animation-iteration-count: infinite | <number>;
Для настройки длительности, соответствующий атрибут использования задержки контроля "animation-duration" и "animation-delay".
Ниже приведен пример кода опции.
.option {
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 5;
}
Javascript Управления
Для большего контроля на анимации, нам нужна маленькая помощь Javascript. Допустим, мы хотим добавть текстовую ссылку для запуска анимации на кнопке.
Во-первых, мы должны добавить ссылку на ссылку, например, так:
<div class="demo animated">
<p>Этот текст будет анимировать. <a href="" id="ref">Нажмите, чтобы анимировать!</a></p>
</div>
Для использования выберите функцию click.
С Javascript, вы можете определить имя анимации. Мы будем использовать подход, создав animate функции, и анимации вместе с элементом класса (в вышеприведенном коде мы добавили demo атрибут).
И Javascript-код, как показано ниже.
<script language="javascript">
$(function() {
$("#ref").click(function() {
animate(".demo", 'bounce');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>
В заключении
Эффект анимации, действительно, является одним из лучших способов сделать ваш сайт более привлекательным.
Поделись с друзьями:
