Телевизор 

Циклическая анимация css3. Производительность анимации в CSS. Размытие на CSS

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

CSS 3D облака

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

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

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

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

Всем привет. Недавно наткнулся на серию очень полезных и интересных видеоуроков на тему «CSS анимация ». Но вот ведь незадача, все видео были на английском языке, а, наверное, не каждый верстальщик знает английский на достаточном уровне, чтобы понять и усвоить всю необходимую информацию. Поэтому я решил перевести для вас эти уроки (точнее сделать вольный перевод). Не стоит благодарить. Итак:

  1. CSS анимация. Введение + свойство transition (эта статья)
  2. CSS анимация. Кейфреймы (keyframes) — скоро будет
  3. Когда и зачем использовать CSS анимации? — скоро будет

Что такое CSS анимация?

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

Анимации в вебе преследуют две основные идеи. Первая идея – оживить что-то . Вы как будто доктор Франкенштейн. У вас есть безжизненный монстр, и вы вдыхаете в него жизнь. Вторая – визуализация движения . И ключевое слово тут именно «движение».

Как анимировать?

В CSS есть два основных инструмента при помощи которых мы можем перемещать элементы по веб-странице. Первый (о котором мы еще поговорим сегодня) – свойство transition . В первую очередь именно с его помощью мы создаем анимации в CSS. Второй инструмент – это свойство animation в паре с кейфреймами (@keyframes – ключевые кадры). Этот инструмент мы более подробно остановимся в следующем уроке, а прямо сейчас мы рассмотрим свойство CSS transition. И еще потом мы поговорим о том, что нужно анимировать на странице (когда это нужно пользователю), а что не стоит анимировать (когда анимация выглядит тупо и неуместно), основываясь на пользовательском опыте (UX — user experience).

Свойство CSS transition – параметры и значения

Синтаксис

Для начала, давайте посмотрим, как читается это свойство, и разберем его синтаксис. Мы пишем это свойство примерно так:

transition : [свойство ] [длительность ] [тайминг функция ] [задержка ] ;

transition : height 1s ease-out 0.2s ;

Мы присваиваем это свойство тому элементу, который мы хотим анимировать. Этот элемент получает плавный переход (или пошаговый) между несколькими своими состояниями (например, высота 100 пикселей и высота 200 пикселей). И то, как будет выглядеть этот переход (с англ. transition), будет зависеть от параметров, которые мы ему зададим.

Первым параметром (значением) свойства transition является другое свойство анимируемого элемента (например, height ).

Вторым параметром является длительность (продолжительность) анимации, то есть, сколько времени займет переход элемента из одного состояния в другое (например, 2s или 2000ms).

Третий параметр – это тайминг функция [timing function ] (изинг функция [easing function ]). То, как интенсивность анимации распределится на протяжении всего времени. Например, анимация может резко начаться, а под конец замедлиться и плавно закончить переход. Могут использоваться как ключевые слова (например, ease, ease- in- out, linear ), так и функции кубика Безье (например, cubic- bezier(0.17, 0.67, 0.83, 0.67) ). Кубик Безье вы можете легко и удобно настраивать на этом ресурсе http://cubic-bezier.com , а также функция steps для того, чтобы создать покадровую анимацию (пошаговую).

Ну и наконец, параметр задержка . Задержка анимации – это время, которое необходимо подождать, прежде чем анимация (в нашем случае — переход) начнется.

Пример анимации CSS transition

Давайте рассмотрим такой пример CSS анимации:

transition: opacity 300ms ease-in-out 1s;

Тут мы анимируем только свойство opacity (непрозрачность). Это означает, что если у элемента, который мы собираемся анимировать, есть и другие свойства, например, высота, ширина или цвет, и даже, если эти свойства отличаются в разных состояниях элемента, то плавный переход (анимация) будет только у свойства opacity. Понимаете?

Вместо конкретного свойства можно использовать также ключевое слово «all ». Это означает, что мы анимируем абсолютно все свойства элемента, которые были изменены в новом состоянии элемента (а не только opacity), и которые вообще можно анимировать. Потому что, как вам известно, не все свойства можно анимировать. Но об этом немного позже.

Второй параметр (300 ms ) говорит нам о том, что анимация продлится всего 300 миллисекунд. То есть элемент быстро появится или быстро растворится, в зависимости от значений свойств в двух его состояниях.

Тайминг функция (ease- in- out ) третьим параметром сделает начало и конец анимации более плавными.

Задержка (1 s ) показывает на сколько должна опоздать анимации перед ее срабатыванием.

В общем-то, это и есть формула того, как мы будем записывать transition анимацию. Это синтаксис. Вы, если что, можете добавлять больше чем один переход [свойств] для одного элемента. Например, вы можете анимировать с разными параметрами изменение высоты и ширины элемента. Для этого в свойстве transition вместо точки с запятой в конце ставьте просто запятую и пишите параметры для еще одного свойства. И не забудьте потом поставить точку с запятой в конце, чтобы все заработало.

Что можно анимировать в CSS?

Пока мы только обсудили синтаксис свойства transition. Теперь давайте поговорим о свойствах, какие из них мы можем анимировать, а какие нет. Потому что есть некоторые вещи, которые просто не имеет смысла анимировать, а некоторые свойства анимировать просто невозможно.

Анимируемые свойства

Взять, к примеру, такие свойства, как:

  1. font-size;
  2. background-color;
  3. width;
  4. left (на какое расстояние от левой стороны элемент может быть перемещен [спозиционирован]…

Очевидно, анимировать эти свойства имеет смысл. Если вы измените их значения, это изменит элемент визуально. Если вы измените размер шрифта, скажем, с 14 до 28 пикселей, вы увидите, что шрифт плавно увеличился, произошла анимация, которая длилась какое-то время. Анимация всегда имеет смысл, если значение свойств это четкие (чаще всего числовые) значения. Если вы увеличите размер шрифта до 100 пикселей, то вы явно увидите, как буквы растут. Плавное изменение цвета фона также можно пронаблюдать [потому что цвет в вебе имеет числовой код, например, красный rgb(255,0,0) ]. Эти свойства являются анимируемыми.

Вообще запомните, если вы представить, что это анимируется – значит это можно анимировать. Чаще всего это работает.

Не анимируемые свойства

А вот список свойств, которые нельзя анимировать (пример):

  1. display;
  2. font-family;
  3. position…

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

Возьмем display. Можете ли вы представить, как визуально будет происходить изменение между «display: block;» и «display: inline- block; »? Как может плавно измениться внешний вид элемента между «position: relative; » и «position: absolute; »? Нет, конечно же, элемент будет выглядеть иначе при изменении этих свойств. Но как вы можете представить себе переход ? Вы не можете этого сделать. Верно? Вы не можете представить себе превращение шрифта Helvetica в шрифт Georgia , каждой буквы, это просто не сработает. Вы можете изменить эти шрифты, но они резко изменятся, никакой анимации не произойдет.

Производительность анимации в CSS

В общем, многие свойства анимируются, но некоторые – нет. Теперь давайте решим, какие из анимируемых свойств лучше подходят для анимирования, а какие хуже. Речь пойдет о производительности. Мы затронули тему производительности, потому что анимации это ресурсоемкий процесс.

В общем вот вещи, которые наиболее хорошо подходят для анимации:

  1. Позиционирование на странице
  2. Масштабирование
  3. Вращение
  4. Прозрачность

Причем, первые три пункта этого списка, это все параметры свойства transform (translate, scale, rotate). Позиционирование происходит по осям X и Y.

Если вы решите анимировать еще что либо, вы рискуете не получить мягкий и плавный переход 60 кадров в секунду. Paul Lewis & Irish

А это именно то, что нас интересует, когда мы говорим о производительности анимации. В общем, самые подходящие свойства для анимации это transform и opacity . При анимировании чего либо другого, fps анимации может упасть гораздо ниже 60fps.

Давайте резюмируем этот пункт следующим. Старайтесь избегать перерисовки элементов на веб странице и анимации элементов, которые браузеру сложно отрендерить (например, тени).

Как сделать анимацию в CSS?

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

Это не сложно и для этого есть много разных способов. Но есть 2 основных, которые вы должны освоить в обязательном порядке. Первый способ – это анимация при наведении на элемент (псевдокласс:hover). Вы наводите курсор мыши на элемент, и срабатывает анимация. Таким образом можно анимировать сам элемент или любой из его дочерних элементов. Потом я покажу вам, как это работает. Второй способ – это изменение класса элемента . То есть у вас есть обычный элемент, вы меняете (или добавляете) его класс на класс, который имеет совсем другие стили. Если добавить класс произойдет анимация, и если убрать класс, произойдет обратная анимация. Это хороший способ для анимирования меню или выпадающих списков.

Послесловие

Мы рассмотрели все, что нам нужно для создания анимации на чистом CSS. Совсем скоро мы разберем практические примеры, а чуть позже – очень интересные примеры.

Вы дочитали до самого конца?

Была ли эта статься полезной?

Да Нет

Что именно вам не понравилось? Статья была неполной или неправдивой?
Напишите в клмментариях и мы обещаем исправиться!

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after

Поддержка браузерами

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:

  1. Создать саму анимацию c помощью ключевого слова @keyframes
  2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Правило @keyframes

Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров - состояний объекта в определенный момент времени.

Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.

Если не задан начальный (from , 0%) или конечный (to , 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.

Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

При определении анимации сразу после свойства @keyframes должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован).

@keyframes move { from { transform: translateX(0px); } 50% { transform: translateX(130px); } 100% { transform: translateX(0px); } }

@keyframes move {

from {

50% {

100% {

transform : translateX (0px ) ;

Мы создали анимацию, которая работает следующим образом:

  1. Начало анимации (from можно было написать 0%) — положение элемента по оси Х равно 0px;
  2. Середина анимации (50%) — положение элемента по оси Х равно 130px;
  3. Конец анимации (to мы использовали 100%) — возвращаем элемент на начало анимации, т.е. положение элемента по оси Х равно 0px;

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

Ключевые кадры можно группировать:

@keyframes move { from { transform: translateX(0px); } 25%, 50% { transform: translateX(130px); } 100% { transform: translateX(0px); } }

@keyframes move {

from {

transform : translateX (0px ) ;

25%, 50% {

transform : translateX (130px ) ;

100% {

transform : translateX (0px ) ;

Одному элементу можно назначить несколько анимаций, их имена и параметры надо писать в порядке присвоения:

element { animation-name: animation-1, animation-2; animation-duration: 2s, 4s; }

element {

animation-name : animation-1, animation-2 ;

animation-duration : 2s, 4s ;

Подключение анимации к элементу происходит двумя командами — animation-name и animation-duration .

Название анимации

Свойство animation-name задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _.

animation-name: move;

Временная функция

Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end .

Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте .

И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps (количество шагов, направление), в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start или end .

  • ease — функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
  • linear — анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,1).
  • ease-in — анимация начинается медленно, а затем плавно ускоряется в конце; соответствует cubic-bezier(0.42,0,1,1).
  • ease-out — анимация начинается быстро и плавно замедляется в конце; соответствует cubic-bezier(0,0,0.58,1).
  • ease-in-out — анимация медленно начинается и медленно заканчивается; соответствует cubic-bezier(0.42,0,0.58,1).
  • cubic-bezier(x1, y1, x2, y2) — см.выше.
  • inherit — наследует это свойство от родительского элемента.

Визуальное сравнение

Анимация с задержкой

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.

element { animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек. }

Повтор анимации

Свойство animation-iteration-count позволяет запустить анимацию несколько раз. Не наследуется. В качестве значения выставляем любое положительное значение 1, 2, 3 … и т.д. либо infinite для бесконечного повторения. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания.

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

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

Есть три преимущества CSS-анимации перед традиционными способами:

  1. Простота использования для простых анимации; Вы можете создать анимацию не зная JavaScript.
  2. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники чтобы сохранить производительность на таком высоком уровне.
  3. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.

Конфигурирование анимации

p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }

В стиле для элемента определяет собой абзац текста.">

с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с, и что имя для @keyframes , описывающей саму анимацию, определено как "slidein".

В элемент определяет собой абзац текста.">

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

Ключи определяются с помощью правила @keyframes . В данном случае мы имеем только два ключа. Первый при 0% анимации (from). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок определяет собой абзац текста.">

находится за пределами правого края окна браузера.

Второй ключ (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит будто заголовок определяет собой абзац текста.">

приплывает к левому краю окна браузера.

Добавление других ключевых слов

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

75% { font-size: 300%; margin-left: 25%; width: 150%; } p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } 75% { font-size: 300%; margin-left: 25%; width: 150%; } }

The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.

Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

Настройка повторения

Чтобы настроить повторение, нужно добавить свойство animation-iteration-count и придать ему значение, равное нужному количеству повторений анимаций. В данном случае давайте установим значение infinite для бесконечного повторения:

P { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }

The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.

Движение текста вправо и влево

Итак, мы настроили повторение, Но есть кое-что странное. Текст при каждом повторении снова "запрыгивает" за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству значения alternate:

P { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }

The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.

Использование шорткодов

Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:

P { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction:alternate; }

можно заменить на:

P { animation: 3s infinite alternate slidein; }

Установка нескольких значений свойствам анимации

CSS cвойство анимации может иметь несколько значений, разделенных запятыми, это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений, и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу:

В первом примере, у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений - по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:

Animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 3s; animation-iteration-count: 1;

Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, fadeInOut имеет продолжительность 2.5s и количество повторений 2, и т.д.

Animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s, 1s; animation-iteration-count: 2, 1, 5;

В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px - 5s. Значения продолжительности закончились, теперь они берутся сначала - bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.

Animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1;

Использование событий анимации

Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью событий анимации . Эти события, представленные объектом AnimationEvent , можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.

Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть как она работает.

Добавление CSS

Начнем с добавления CSS. Анимация будет длиться 3 с., будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate . В ключах @keyframes установлены такие значения ширины и левого отступ, что элемент будет скользить по экрану.

Slidein { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; animation-direction: alternate; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }

Добавление обработчика событии анимации

Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

Var e = document.getElementById("watchme"); e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false); e.className = "slidein";

Это довольно стандартный код; Вы можете получить дополнительную информацию в документации element.addEventListener() . Последнее что делает этот код это установка класса "slidein" для анимируемого элемента; мы делаем это чтобы запустить анимацию.

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше чем исполняется наш сценарий. Так мы сможем контролировать начало анимации сами посредством вставки класса "slidein" для анимируемого элемента.

Регистрация событий

События будут передаваться функции listener() , показанной ниже.

Function listener(e) { var l = document.createElement("li"); switch(e.type) { case "animationstart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "animationend": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "animationiteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; } document.getElementById("output").appendChild(l); }

Этот код также очень прост. Этот код следит за event.type , чтобы определить тип события и добавляет элемент

    чтобы залогировать произошедшее событие.

    Вывод, когда анимация закончится, будет выглядеть как-то так:

    • Started: elapsed time is 0
    • New loop started at time 3.01200008392334
    • New loop started at time 6.00600004196167
    • Ended: elapsed time is 9.234000205993652

    Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадют. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend .

    HTML

    Ради полноты картины приведем HTML. В разметке имеется тег ul в который и выводится вся информация:

    Watch me move

    This example shows how to use CSS animations to make p elements move across the page.

    In addition, we output some text each time an animation event fires, so you can see them in action.

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

    Как видите здесь присутствует атрибут :hover , который меняет стиль фона при наведении, в некоторых примерах он должен быть обязательно.

    Плавное изменение цвета элемента при наведении с помощью transition


    #box1 {
    margin-bottom: 5px;
    background-color: #ccc;

    padding: 10px;
    text-align: center;
    width: 200px;
    height:100px;

    text-indent: 0px;
    border: 1px solid #888;
    -moz-transition: background-color 0.8s 0.1s ease;
    -o-transition: background-color 0.8s 0.1s ease;
    -webkit-transition: background-color 0.8s 0.1s ease;
    cursor: pointer;}

    #box1:hover {
    background-color: #97CE68;
    color: #333;
    }

    Как видите такую анимацию мы добились с помощью атрибута transition . Здесь можно изменить скорость анимации в секундах, в данном случае стоит 0.8с до полного изменения цвета при наведении и 0.1с до того как сработает анимация после наведения и убирания курсора. (Извиняюсь за ребус:-)) Это значение можно изменять как Вам нужно.

    Цвет фона при наведении ставится атрибутом :hover , он здесь обязательный, иначе анимация работать не будет.

    Изменение размера элемента


    #box2 {
    margin-bottom: 5px;
    background-color: #ccc;
    color: #333;

    padding: 10px;
    text-align: center;
    width: 200px;
    height:100px;

    text-indent: 0px;
    border: 1px solid #888;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    cursor: pointer;}

    #box2:hover {
    background-color: #97CE68;
    color: #000;
    width: 150px;
    height:50px;
    }

    В этом примере мы добились плавного изменения размера блока при наведении. Стандартная величина 200 на 100, а величина при наведении составляет 150 на 50, которая задаётся атрибутом :hover.

    Ещё здесь можно изменить блок только по ширине или по высоте, нужно просто под :hover удалить width: — блок изменяется только по высоте, height: — блок изменяется только по ширине.

    Также можно изменить скорость изменения. В данном случае это 1с.

    Кручение объекта


    #box3 {
    margin-bottom: 5px;
    background-color: #ccc;
    color: #333;

    padding: 10px;
    text-align: center;
    width: 200px;
    height:100px;

    text-indent: 0px;
    border: 1px solid #888;
    -moz-transition: all 1s 0.1s ease-in;
    -o-transition: all 1s 0.1s ease-in;
    -webkit-transition: all 1s 0.1s ease-in;
    cursor: pointer;}

    #box3:hover {
    background-color: #97CE68;
    color: #000;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    }

    Кручение происходит с помощью transform и transition . В данном случае объект крутится по часовой стрелке на 360 градусов со скоростью в одну секунду. Если нужно, чтобы блок крутился против часовой стрелки, в transform значении нужно поставить -(минус). Естественно градус оборота можно изменять.

    Плавное увеличение и уменьшение объекта


    #box4 {
    margin-bottom: 5px;
    background-color: #ccc;
    color: #333;
    padding: 10px;
    text-align: center;
    width: 200px;
    height:100px;

    text-indent: 0px;
    border: 1px solid #888;
    -moz-transition: all 3s ease-out;
    -o-transition: all 3s ease-out;
    -webkit-transition: all 3s ease-out;
    cursor: pointer;}

    #box4:hover {
    background-color: #97CE68;
    color: #000;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    }

    В этом примере блок плавно увеличивается в 2 раза. Это значение выставляется transform: scale(2) . Если поставить значение 1.5, соответственно увеличение блока будет в 1.5 раза.

    Этим же способом можно уменьшить размер блока, например поставить значение 0.5.

    Плавное смещение блока вниз

    #box5 {
    margin-bottom: 5px;
    background-color: #ccc;
    color: #333;
    padding: 10px;
    text-align: center;
    width: 200px;
    height:100px;

    text-indent: 0px;
    border: 1px solid #888;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    cursor: pointer;}

    #box5:hover {
    background-color: #97CE68;
    color: #000;
    -webkit-transform: translate(0,50px);
    -moz-transform: translate(0,50px);
    -o-transform: translate(0,50px);
    }

    Здесь перемещение задаётся в пикселах. В данном случае (0,50px). Так же можно заставить блок подниматься вверх этим значением 0,-50px. Или по диагонали вниз 50px,50px. Одним словом блок можно заставить смещаться куда угодно.

    Вот в принципе и всё, что хотелось сказать. Нет, не всё :-) Забыл напомнить о том, что эту CSS анимацию можно применять к любым объектам на сайте: к картинкам, тексту, заголовкам, иконкам и т.д. Вот для ссылок отлично подойдет плавное изменение цвета, по моему очень красиво. :-)

    И ещё, этой информацией поделился с нами сайт shpargalkablog.ru . За что ему огромное спасибо.

    Вот теперь точно все:-) До скорых встреч, друзья.