Девять простых примеров CSS3 анимации. Девять простых примеров CSS3 анимации Полное руководство по Flexbox

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

Сегодня мы покажем вам как работать с CSS3 библиотекой, которая превратит создание анимации в приятный и лёгкий процесс: Animate.css .

Animate.css - это библиотека для создания анимации при помощи CSS3. Данная библиотека поддерживает более 50 различных анимационных эффектов, которые практически все работают в разных браузерах, поддерживаемых CSS3.

Данные эффекты можно применять как к тексту, так и к изображениям, формам и так далее.

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

По умолчанию Animate.css проигрывает анимацию единожды при загрузке страницы. Для цикличного проигрывания анимации, добавим немного Javascript-а.

... ...

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

This text will animate.

Вот и всё! Сейчас анимация будет проиграна при загрузке страницы. Добавим Javascript, для того чтобы проигрывать анимацию при “выстреле” какого-то события. Класс.option абсолютно произвольный, можете изменить его под себя.

Если мы хотим чтобы анимация не прекращалась или время её выполнения было иным, то нам нужно подправить некоторые значения.

Для прокрутки анимации n-ое или бесконечное число раз, можем подправить атрибут animation-iteration-count . Не забудьте указать браузерный префикс для webkit, moz, и т.д. Для бесконечной прокрутки, выставите значение infinite .

Если же нам необходимо воспроизвести анимацию конкретное количество раз, то можете следать это так.

Vendor-animation-iteration-count: infinite | ;

Для изменения времени воспроизведения, можете подправить свойство animation-duration и animation-delay (задержка). Пример:

Option { -webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 5; }

Для анимирования при каком-то событии (к примеру при клике), воспользуемся Javascript. Для начала добавим ссылку.

This text will animate. Click to animate!

С помощью Javascript мы можем создать функцию animate, в которую будем передавать название класса анимации:

$(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); }

Сегодня мы будем учиться анимировать объекты сайта легко и быстро, при помощи двух скриптов. Название которых вы можете наблюдать выше, в заголовке этой статьи. Но в начале, давайте я вам расскажу, для чего нужен каждый из них.

WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.

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

Недостаток animate.css заключается в том, что это всего лишь обычный набор CSS-правил завязанных на анимации. То есть они проигрываются сразу после загрузки страницы. И если анимируемые элементы не видны на "первом" экране, то всю эту красоту посетители просто не увидят. Ведь она проиграется еще до того, как они перемотают страницу к нужному месту.

И в первой заметке (ссылка в следующем абзаце), что бы этого не происходило, я показывал вам, как и где прописывать js-коды, что бы анимация проигрывалась на определенном этапе скролла страницы. Это было крайне неудобно, однако работало на ура

Поэтому, перед тем как начать, советую посмотреть урок “ ”. Так как я уже буду подразумевать, что вы умеете пользоваться анимацией на сайте. Заодно вы сразу поймете, насколько wow.js облегчает работу . Ведь теперь нам не надо будет писать и копаться в js-коде. Подключил и забыл

И так, с введением покончено. Теперь давайте ближе к "телу". Я записал видео-урок по этой теме, однако перед просмотром, хочу показать то, что получится у вас, если пройдете урок до конца на практике. Так сказать, для большей мотивации

Ну что, посмотрели? Вот это вы "забабахаете" собственными руками. Поэтому сейчас бегом смотреть видео.

Дерзайте!

1 шаг. Скачать скрипты wow.js и animate.css с официальных сайтов (ссылки смотрите выше под видео) и разместить их в папке своего проекта.

2 шаг. Подключаем скрипты простым HTML кодом на странице в теге :

Примечание от подписчика канала Master-CSS:

Шаг 3. Необходимо инициализировать скрипт добавив вот такой код, сразу после его подключения:

new WOW().init();

На этом подключение заканчивается, и настает пора второго этапа.

Шаг 1. Выбираем элемент, который хотим анимировать и добавляем ему класс class="wow" . В коде ниже, я показал это на примере картинки:

Шаг 2. Выбираем анимацию, и добавляем её дополнительным классом к нашей собачке:

Шаг 3. Добавляем настройки для анимации если надо, при помощи специальных data-атрибутов:

В коде выше я указал, что анимация должна срабатывать, когда картинка пройдет 200 пикселей от низа экрана. Но при этом у нее будет задержка в пол секунды, а сама анимация будет занимать по времени ровно 2 секунды.

Обращаю ваше внимание на то, что эти атрибуты не обязательные. Если вы их не укажете, анимация будет просто проигрываться по умолчанию, как только элемент появится на экране при прокрутке окна браузера.

Ну что же ребята. На этом пожалуй все. Если будут вопросы – задавайте в комментариях;)

| 18.02.2016

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

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

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition - «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

Color:hover { background:#53ea93; }

Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:

Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }

Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

• @keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
• animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6:

Fade { opacity: 1; } .fade:hover { opacity: 0.6; }

Для противоположного результата поменяйте значения местами:

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }

Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:

Circle:hover { border-radius: 70%; }

Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }

На сегодняшний день свойство transition поддерживается следующими браузерами:

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

У многих посетителей возник вопрос, как же на практике применять библиотеку Animate.css. В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.

1. Для начала следует скачать и подключить библиотеку. Есть три варианта.

• Полная версия . Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит на первом этапе ознакомления с анимацией в целом, поскольку позволяет взглянуть, как это всё устроено.
• Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
• Выборочные эффекты . Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.

2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса - animated и класс с названием эффекта, допустим fadeInDown (список всех эффектов и их названия смотрим ). Например, вы желаете добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:

Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.

$(document).ready(function() { $("img").addClass("animated flash"); })

3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).

Пример 1. Всплывающее сообщение

Предупреждение .warning { background: #fc0; padding: 10px; border: 1px solid #000; } Зенитное часовое число оценивает экваториальный секстант!

Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу добавляем класс animated и подключаем jQuery (пример 2).

Пример 2. Галерея

Галерея $(document).ready(function() { $("img.animated").hover(function() { $(this).addClass("bounce"); // Добавляем класс bounce }, function() { $(this).removeClass("bounce"); // Убираем класс })})

В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce ; если курсор убрать, то класс bounce также убирается.

4. Окончательно можно настроить анимацию по своему вкусу, изменив скорость анимации, а также задав время задержки через CSS. И то и другое не обязательно и применяется при необходимости.

Animated { -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }

В этой статье мы продолжим изучать нюансы применения анимации, изучим такие возможности CSS как приостановка анимации , направление анимации , рассмотрим как указать стиль для элемента, когда анимация не воспроизводится , разберем как грамотно применять универсальное свойство для создания анимации, подключим и научимся использовать библиотеку Animate.css .

Обращаю Ваше внимание на то, что для изучения этого материала Вам понадобятся знания, которые необходимо получить в предыдущей статье " ".

Следующее простое свойство, которое мы рассмотрим animation-play-state , оно определяет состояние анимации. Этому свойству передается одно из двух возможных ключевых слов:

• running - анимация воспроизводится (значение по умолчанию).
• paused - анимация приостановлена.

В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции.

При наведении на элемент курсора мыши (псевдокласс :hover()) анимация приостанавливается за счет установки значения paused свойству animation-play-state , анимация возобновляется, когда курсор покидает элемент.

Результат нашего примера:

С использованием универсального свойства animation мы указали следующие параметры анимации:

• Имя анимации - iliketomoveit .
• Длительность анимации - 4 секунды .
• Кривая скорости - шаговая анимация steps(3,start) . На каждую часть ключевого кадра будет произведено 3 шага .
• Задержка анимации - 500 миллисекунд .
• Количество циклов - infinite (бесконечно).
• Направление анимации - reverse (в обратном направлении).

Результат нашего примера:

Рассмотрим следующий пример в котором

В этом примере мы создали несколько анимаций, в которых с помощью свойства происходит сдвиг вложенных элементов по оси X (горизонтальная ось) и по оси Y (вертикальная ось). Для каждого элемента была установлена различная задержка анимации, составляющая от 1 секунды до 1,8 секунды. Каждая анимация элементов содержит следующие параметры:

• Имя анимации - up .
• Длительность анимации - 1 секунда .
• Кривая скорости - linear (одинаковая скорость на протяжении всей анимации).
• Задержка анимации - от 1 секунды до 1,8 секунды .
• Количество циклов - infinite (бесконечно).

Давайте рассмотрим простую анимацию из библиотеки, которая измененяет прозрачность элемента:

Эти ключевые кадры с помощью свойства позволяют изменить прозрачность элемента с полностью прозрачного до непрозрачного состояния.

Но этого пока недостаточно, чтобы запустить интересующую Вас анимацию библиотеки Animate.css . Для того, чтобы запустить анимацию Вы можете, но не обязаны, воспользоваться следующими созданными автором проекта классами:

Обращаю Ваше внимание, что вы можете создать свои классы, которые будут контролировать процесс анимации. Как правило, добавление классов тому, или иному элементу происходит с использованием языка JavaScript в зависимости от действий пользователя, или каких-то определенных событий. Мы с Вами рассмотрим пример в котором будем использовать только классы из библиотеки Animate.css и установим анимацию только с использованием каскадных таблиц стилей.

Перейдем к рассмотрению примера:

В этом примере мы подключили с использованием тега библиотеку Animate.css и разместили изображение, к которому подключили (указали через пробел) следующие 3 класса из библиотеки.