Создавайте CSS анимацию с помощью Animate.CSS

CSS улучшился, появилось много функций, которые делают веб-разработку намного более интересной и сложной. Одной из таких функций является анимационные эффекты на CSS3. До CSS3, чтобы создать анимацию, вы могли сделать это только с помощью Javascript. Но теперь вы можете легко создать его прямо через CSS3.

Animate.CSS — это готовая к использованию библиотечная коллекция анимационных эффектов CSS3. Эта библиотека предоставляет вам более 50 различных анимационных эффектов, которые отлично работают на большинстве браузеров с поддержкой CSS3.

Вы можете применить анимацию к тексту, картинке, форме и так далее. Есть также много отличных сайтов, использующих эту библиотеку; Tridiv — лучший CSS 3D редактор в интернете.

Начнем

С Animate.CSS, все, что вам нужно сделать, это включить соответствующие классы с вашими элементами. Чтобы начать работу, сначала включите animate.css-файл в head вашего сайта. Полную библиотеку вы можете скачать со страницы репозитория Github.

По умолчанию animate.css будет анимировать только один раз при первой загрузке страницы. Далее все будет оставаться статичным. Чтобы управлять анимацией, нам понадобится немного Javascript. В этом вопросе мы включим в проект, например jQuery.

<head>
...
    <link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
...
</head>

HTML разметка

Чтобы применить анимацию, вы должны добавить класс .animated к элементу, который вы хотите анимировать, вместе с именем анимации, например, так.

<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>

Анимационные эффекты действительно, являются одним из лучших способов для сделать свой сайт более привлекательным но помните, не переусердствуйте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.