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

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

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

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

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

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

с помощью свойства 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 являются специфическим видом анимации, где:

• есть только два состояния: начало и конец;
• анимация не зациклена;
• промежуточные состояния управляются только функцией времени.

Но что если вы хотите:

• иметь контроль над промежуточными состояниями?
• зациклить анимацию?
• сделать разные виды анимаций для одного элемента?
• анимировать определённое свойство только на половину пути?
• имитировать различные функции времени для разных свойств?

Анимация в CSS позволяет всё это, и не только.

Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).

Свойства анимации

Как и transition , свойство animation является сокращённым для нескольких других:

• animation-name : название анимации;
• animation-duration : как долго длится анимация;
• animation-timing-function : как вычисляются промежуточные состояния;
• animation-delay : анимация начинается спустя некоторое время;
• animation-iteration-count : сколько раз должна выполняться анимация;
• animation-direction : должно движение идти в обратную сторону или нет;
• animation-fill-mode : какие стили применяются до начала анимации и после её завершения.

Быстрый пример

Для оживления кнопки загрузки, вы можете написать анимацию подпрыгивания :

@keyframes bouncing{ 0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); } 100% { bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1); } } .loading-button { animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both; }

Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes и назвать её .

Я использовал сокращенное свойство animation и включил все возможные варианты:

• animation-name: bouncing (совпадает с названием ключевых кадров)
• animation-duration: 0.5s (полсекунды)
• animation-timing-function: cubic-bezier(0.1,0.25,0.1,1)
• animation-delay: 0s (без задержки)
• animation-iteration-count: infinite (воспроизводится бесконечно)
• animation-direction: alternate (идёт назад и вперёд)
• animation-fill-mode: both

@keyframes

Перед применением анимации к элементам HTML, вам требуется написать анимацию с помощью ключевых кадров . Вообще, ключевые кадры - это каждый промежуточный шаг в анимации. Они определяются с помощью процентов:

• 0% - первый шаг анимации;
• 50% - шаг на полпути в анимации;
• 100% - последний шаг.

Можно также использовать ключевые слова from и to вместо 0% и 100%, соответственно.

Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.

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

Чтобы определить анимацию, просто напишите ключевое слово @keyframes с его названием :

@keyframes around { 0% { left: 0; top: 0; } 25% { left: 240px; top: 0; } 50% { left: 240px; top: 140px; } 75% { left: 0; top: 140px; } 100% { left: 0; top: 0; } } p { animation: around 4s linear infinite; }

Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite , то анимация будет идти от 0% до 100%, а затем немедленно обратно к 0% и так бесконечно.

animation-name

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

• при написании анимации с помощью @keframes ;
• при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation ).
@keyframes whatever { /* ... */ } .selector { animation-name: whatever; }

Подобно именам классов CSS, название анимации может включать в себя только:

• буквы (a-z);
• цифры (0-9);
• подчёркивание (_);
• дефис (-).

Название не может начинаться с цифры или с двух дефисов.

animation-duration

Как и длительность перехода , длительность анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

Selector { animation-duration: 0.5s; }

Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.

animation-timing-function

Подобно функциям времени для переходов , функции времени для анимации могут использовать ключевые слова , такие как linear , ease-out или могут быть определены с помощью произвольных кривых Безье .

Selector { animation-timing-function: ease-in-out; }

Значение по умолчанию: ease .

Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную функцию времени и моделировать конкретную кривую Безье, определяя множество очень специфичных ключевых кадров. Посмотрите Bounce.js для создания передовой анимации.

animation-delay

Как и с задержкой перехода , задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

По умолчанию равно 0s, что означает отсутствие любой задержки.

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

A, .b, .c { animation: bouncing 1s; } .b { animation-delay: 0.25s; } .c { animation-delay: 0.5s; }

animation-iteration-count

По умолчанию, анимация воспроизводится только один раз (значение 1). Вы можете установить три типа значений:

• целые числа, вроде 2 или 3;
• дробные числа, вроде 0.5, которые будут воспроизводить только половину анимации;
• ключевое слово infinite , которое будет повторять анимацию бесконечно.
.selector { animation-iteration-count: infinite; }

animation-direction

Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.

• normal : начинается с 0%, заканчивается на 100%, начинается с 0% снова.
• reverse : начинается со 100%, заканчивается на 0%, начинается со 100% снова.
• alternate : начинается с 0%, идёт до 100%, возвращается на 0%.
• alternate-reverse : начинается со 100%, идёт до 0%, возвращается на 100%.

Это легче представить, если счётчик итераций анимации установлен как infinite .

animation-fill-mode

Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.

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

animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации .

Давайте представим себе кнопку , которая является:

• красной по умолчанию;
• становится синей в начале анимации;
• и в итоге зелёной , когда анимация завершена.

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

1. Основные свойства CSS3 анимации

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

• animation-name — уникальное имя анимации (ключевых кадров, о них поговорим чуть ниже).
• animation-duration — длительность анимации в секундах.
• animation-timing-function — кривая изменения скорости анимации. На первый взгляд очень непонятно. Всегда легче показать на примере, а их Вы увидите ниже. Может принимать следующие значения: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n) .
• animation-delay — задержка в секундах перед началом анимации.
• animation-iteration-count — количество повторов анимации. Задается либо просто числом, либо можно указать infinite и анимация будет выполняться бесконечно.

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

Последнее, что нам нужно знать и понимать из теории — это то, как создавать ключевые кадры. Это делать также легко и делается это с помощью правила @keyframes , внутри которого указываются ключевые кадры. Синтаксис этого правила следующий:

Выше мы задали первый и последний кадр. Все промежуточные состояния рассчитаются АВТОМАТИЧЕСКИ!

2. Реальный пример анимации CSS3

Теория как обычно скучна и не всегда понятна. Намного проще увидеть всё на реальном примере, а лучше всего сделать своими руками на какой-нибудь тестовой HTML страничке.

При изучении языка программирования обычно пишут программу "Hello, world!", по которой можно понять какой синтаксис у этого языка и еще какие-нибудь базовые вещи. Но мы изучаем не язык программирования, а язык описания внешнего вида документа. Поэтому у нас будет свой "Hello, world!".

Вот что мы сделаем для примера: пусть у нас какой-нибудь блок

будет изначально с шириной 800px и за 5 секунд уменьшится до 100px.

Вроде бы всё понятно — просто нужно сжать блок

и всё! Давайте посмотрим как это выглядит в действительности.

Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице.

1	<div class = "toSmallWidth" >

А вот что находится в файле стилей:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth { margin : 20px auto ; /*внешние отступы сверху и снизу по 20px и выравнивание по середине*/ background : red ; /*красный фон у блока*/ height : 100px ; /*высота блока 100px*/ width : 800px ; /*начальная ширина 800px*/ -webkit-animation-name : animWidthSitehere; -webkit-animation-duration : 5s; /* свойство с префиксом для браузеров Chrome, Safari, Opera */ animation-name : animWidthSitehere; /* указываем название ключевых кадров (находятся ниже)*/ animation-duration : 5s; /*задаем длительность анимации*/ } /* ключевые кадры с префиксом для браузеров Chrome, Safari, Opera */ @-webkit-keyframes animWidthSitehere { from { width : 800px ; } to { width : 100px ; } } @keyframes animWidthSitehere { from { width : 800px ; } /*первый ключевой кадр, где ширина блока 800px*/ to { width : 100px ; } /*последний ключевой кадр, где ширина блока 100px*/ }

Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные "построились" автоматически.

Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал.

3. Примеры анимации CSS3 посложнее

Выше Вы узнали как можно легко создать CSS3 анимацию. Если попробовали своими руками это сделать, то уже поняли весь процесс и сейчас хотите узнать как можно создать более сложную и красивую анимацию. А ее создать действительно можно. Ниже есть 3 урока где анимация создается также, как в примере выше.

3 урока по анимации CSS (преобразования)

Уроки помогут Вам понять анимацию CSS еще лучше. Главное — это пробовать повторять то, что Вы видите в уроках. Или хотя бы попробуйте изменять значения свойств и смотреть что получается, тогда Вы станете меньше боятся CSS.

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

1. Изменение цвета при наведении курсора

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

Color:hover { background:#53ea93; }

2. Появление рамки

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

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

3. Свинг

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

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

@-webkit-keyframes swing { 15% { -webkit-transform: translateX(9px); transform: translateX(9px); } 30% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 65% { -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes swing { 15% { -webkit-transform: translateX(9px); transform: translateX(9px); } 30% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 65% { -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .swing:hover { -webkit-animation: swing 0.6s ease; animation: swing 0.6s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

4. Затухание

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

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

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

5. Увеличение

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

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

6. Уменьшение

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

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

7. Трансформация в круг

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

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

8. Вращение

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

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

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта 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 поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer	Поддерживается версией IE 10 и выше
Chrome	Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-)
Firefox	Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-)
Opera	Поддерживается с версии 12.1
Safari	Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-)

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

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