Для создания анимации применяются свойства CSS transition и animation Рассмотрим их подробно с примерами.

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

Это что касается пользовательских показателей.

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

Должен предупредить — прежде чем браться за анимацию элементов, нужно познакомиться с основами HTML и CSS

Основные компоненты CSS анимации — свойства transition и animation , и правило @keyframes .

Рассмотрим их по порядку.

transition

Свойство transition применяется для создания простых анимаций, то есть оно создаёт эффект перехода между двумя состояниями элемента.

transition в свою очередь можно разделить на 4 составляющие, каждая из которых влияет на определённый аспект эффекта перехода.

1. transition-property — определяет свойство, которое будет анимироваться. Например если элемент будет сдвигаться, то это будут свойства top, left, margin и т. п., менять размер, то width или height, менять цвет — color или background.

Записывается так:

transition-property : left ;

2. transition-duration — продолжительность эффекта перехода. Задаётся в секундах.

transition-duration : 3s ;

3. transition-timing-function — скорость эффекта перехода. Принимает следующие значения:

ease — анимация медленно начинается, затем ускоряется и к концу опять замедляется;

ease-in — медленно начинается, а к концу ускоряется;

ease-out — быстро начинается, а к концу замедляется;

ease-in-out — замедление в начале и в конце;

linear — постоянная скорость;

cubic-bezier — задаёт все значения в числовом выражении. Например значение ease записывается так: cubic-bezier(0.25,0.1,0.25,1).

4. transition-delay — задержка начала анимации. Задается в секундах. Например анимация может начаться через определённое время после загрузки страницы.

В сокращённом варианте запись анимации выглядит следующим образом — в свойстве transition задаются все вышеперечисленные значения по порядку через пробел.

transition : left 3s ease(или cubic-bezier(0.25,0.1,0.25,1) 3s ;

Пример в котором элемент будет перемещаться при наведении на него курсора.

Результат:

animation и @keyframes

Свойство animation и правило @keyframes применяются для создания анимации любой сложности.

Свойство animation задаёт параметры действия для анимации (длительность анимации, повторение, направление, тип движения, шаги), а в блоке @keyframes задаётся сама анимация по шагам (изменения вида и положения)

Свойство animation включает в себя восемь составляющих:

1. animation-name — имя анимации. задаётся произвольно. Необходимо для того, чтоб определить анимацию в блоке @keyframes , так как для одного элемента может быть задано несколько анимаций.

2. animation-duration — длительность анимации, задаётся в секундах (s) или миллисекундах (ms).

3. animation-timing-function — определяет тип анимации и принимает следующие значения:

ease — скольжение;

linear — ровное движение;

ease-out — ускорение в начале;

ease-in — ускорение в конце;

ease-in-out — более плавное скольжение, чем ease

cubic-bezier — задаёт числовые параметры позволяющие реализовать более сложные типы анимации. Инструмент для подбора числовых параметров — cubic-bezier.com

step-start и step-end — задаёт пошаговую анимацию (счётчик)

steps — задаёт количество шагов за которые будет выполнена анимация (секундомер — steps(60) animation-duration -60s)

4. animation-iteration-count — задаёт число повторений анимации. Принимает значения:

любое число — сколько раз повторяется анимация;

infinite — бесконечное повторение;

5. Animation-direction — задаёт направление движения. Принимает значения:

normal — движение слева на право;

reverse — движение справа на лево;

alternate — полный цикл туда и обратно;

alternate-reverse — полный цикл, но начинается и заканчивается с конца;

6. animation-play-state — задаёт остановку анимации. Принимает значения:

running — анимация проходит нормально (по умолчанию);

paused — анимация замирает на первом шаге;

7. animation-delay — задаёт задержку анимации перед началом воспроизведения. Определяется в секундах (s) и миллисекундах (ms)

8. animation-fill-mode — позволяет проигрывать анимацию вне указанного времени воспроизведения. Принимает значения:

none — анимация в работает только в заданном времени воспроизведения, потом возвращается на место.

forwards — анимация продолжается после окончания времени воспроизведения;

backwards — анимация начинается до начала воспроизведения;

both — анимация работает и до начала и после окончания времени воспроизведения;

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

Все свойства можно записать в сокращённом виде, указав в свойстве animation только их значения. Например:

Правило @keyframes — второй шаг в создании сложной анимации.

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

На практике это выглядит следующим образом: в таблице стилей создаётся селектор @keyframes внутрь которого помещаются селекторы последовательно определяющие состояние элемента.

Например, возьмём элемент

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

div {
width : 200px ;
height : 200px ;
background-color : #FF3D00 ;
animation : nev 5s infinite alternate ;

@keyframes nev {
from { /* От */
opacity : 0 ; /* полная прозрачность */
}
to { /* До */
opacity : 1 ; /* полная непрозрачность */
}
}

Селекторами from и to задаётся преобразование от одного состояния элемента до другого.

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

Каждому этапу при этом можно задать что-то своё. Например продолжительность, границу, размер и т.п.

@keyframes nev {
0% {
opacity : 0 ;
border-radius : 50% ;
}

50% {
opacity : 0.5;
border-radius : 30% ;
}

100% {
opacity : 1 ;
border-radius : 0 ;
}
}

Пример появления и исчезновения квадрата:

Результат:

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

В следующей статье «CSS перемещение, вращение, 3D» подробно разберём свойство transform, очень часто применяющееся в анимациях.

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

There are three key advantages to CSS animations over traditional script-driven animation techniques:

1. They’re easy to use for simple animations; you can create them without even having to know JavaScript.
2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren"t currently visible.

Configuring the animation

To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in below.

animation-name Specifies the name of the @keyframes at-rule describing the animation’s keyframes. animation-duration Configures the length of time that an animation should take to complete one cycle. animation-timing-function Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves. animation-delay Configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-iteration-count Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely. animation-direction Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. animation-fill-mode Configures what values are applied by the animation before and after it is executing. animation-play-state Lets you pause and resume the animation sequence.

Defining the animation sequence using keyframes

Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.

Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Because these two times are so important, they have special aliases: from and to . Both are optional. If from / 0% or to / 100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.

You can optionally include additional keyframes that describe intermediate steps between the start and end of the animation.

Examples

Note: Some older browsers (pre-2017) may need prefixes; the live examples you can click to see in your browser include the -webkit prefixed syntax.

Making text slide across the browser window

And the rest of the code:

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

Using animation shorthand

The animation shorthand is useful for saving space. As an example, the rule we’ve been using through this article:

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

Could be replaced by

P { animation: 3s infinite alternate slidein; }

Setting multiple animation property values

The CSS animation longhand values can accept multiple values, separated by commas - this feature can be used when you want to apply multiple animations in a single rule, and set separate durations, iteration counts, etc. for the different animations. Let’s look at some quick examples to explain the different permutations:

In this first example, we have three animation names set, but only one duration and iteration count. In this case all three animations are given the same duration and iteration count:

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

In this second example, we have three values set on all three properties. In this case each animation is run with the corresponding values in the same position on each property, so for example fadeInOut has a duration of 2.5s and an iteration count of 2, etc.

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

In this third case, there are three animations specified, but only two durations and iteration counts. In such cases where there are not enough values to give a separate value to each animation, the values cycle from start to finish. So for example, fadeInOut gets a duration of 2.5s and moveLeft300px gets a duration of 5s. We’ve now got to the end of the available duration values, so we start from the beginning again - bounce therefore gets a duration of 2.5s. The iteration counts (and any other property values you specify) will be assigned in the same way.

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

Using animation events

You can get additional control over animations - as well as useful information about them - by making use of animation events. These events, represented by the AnimationEvent object, can be used to detect when animations start, finish, and begin a new iteration. Each event includes the time at which it occurred as well as the name of the animation that triggered the event.

We"ll modify the sliding text example to output some information about each animation event when it occurs, so we can get a look at how they work.

Adding the CSS

We start with creating the CSS for the animation. This animation will last for 3 seconds, be called “slidein”, repeat 3 times, and alternate direction each time. In the @keyframes , the width and margin-left are manipulated to make the element slide across the screen.

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

Adding the animation event listeners

We’ll use JavaScript code to listen for all three possible animation events. This code configures our event listeners; we call it when the document is first loaded in order to set things up.

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

This is pretty standard code; you can get details on how it works in the documentation for eventTarget.addEventListener() . The last thing this code does is set the class on the element we"ll be animating to “slidein”; we do this to start the animation.

Why? Because the animationstart event fires as soon as the animation starts, and in our case, that happens before our code runs. So we’ll start the animation ourselves by setting the class of the element to the style that gets animated after the fact.

Receiving the events

The events get delivered to the listener() function, which is shown below.

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

This code, too, is very simple. It simply looks at the event.type to determine which kind of animation event occurred, then adds an appropriate note to the element represents an unordered list of items, typically rendered as a bulleted list.">

(unordered list) we’re using to log these events.

The output, when all is said and done, looks something like this:

• 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

Note that the times are very close to, but not exactly, those expected given the timing established when the animation was configured. Note also that after the final iteration of the animation, the animationiteration event isn’t sent; instead, the animationend event is sent.

The HTML

Just for the sake of completeness, here’s the HTML that displays the page content, including the list into which the script inserts information about the received events:

Watch me move

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

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

And here"s the live output.

Note : Reload page to see the animation, or click the CodePen button to see the animation in the CodePen environment.

Все современные браузеры, кроме 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 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 анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.

Последнее обновление: 06.11.2016

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

Анимация опирается на последовательню смену ключевых кадров (keyframes). Каждый ключевой кадр определяет один набор значений для анимируемых свойств. И последовательная смена таких ключевых кадров фактически будет представлять анимацию.

По сути переходы применяют ту же модель - так же неявно определяются два ключевых кадра - начальный и конечный, а сам переход представляет переход от начального к конечному ключевому кадру. Единственное отличие анимации в данном случае состоит в том, что для анимации можно определить множество промежуточных ключевых кадров.

В целом объявление ключевого кадра в CSS3 имеет следующую форму:

@keyframes название_анимации { from { /* начальные значения свойств CSS */ } to { /* конечные значения свойств CSS */ } }

После ключевого слова @keyframes идет имя анимации. Затем в фигурных скобках определяются как минимум два ключевых кадра. Блок после ключевого слова from объявляется начальный ключевой кадр, а после клюевого слова to в блоке определяется конечный ключевой кадр. Внутри каждого ключевого кадра определяется одно или несколько свойств CSS, подобно тому, как создается обычный стиль.

Например, определим анимацю для фонового цвета элемента:

В данном случае анимация называется backgroundColorAnimation . Анимация может иметь произвольное название.

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

Чтобы прикрепить анимацию к элементу, у него в стиле применяется свойство animation-name . Значение этого свойства - название применяемой анимации.

Также с помощью свойства animation-duration необходимо задать время анимации в секундах или миллисекундах. В данном случае время анимации - это 2 секунды.

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

@keyframes backgroundColorAnimation { from { background-color: red; } to { background-color: blue; } } div{ width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: #ccc; } div:hover{ animation-name: backgroundColorAnimation; animation-duration: 2s; }

Множество ключевых кадров

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

@keyframes backgroundColorAnimation { from { background-color: red; } 25%{ background-color: yellow; } 50%{ background-color: green; } 75%{ background-color: blue; } to { background-color: violet; } }

В данном случае анимация начинается с красного цвета. Через 25% времени анимации цвет меняется на желтый, еще через 25% - на зеленый и так далее.

Также можно в одном ключевом кадре анимировать сразу несколько свойств:

@keyframes backgroundColorAnimation { from { background-color: red; opacity: 0.2; } to { background-color: blue; opacity: 0.9; } }

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

@keyframes backgroundColorAnimation { from { background-color: red; } to { background-color: blue; } } @keyframes opacityAnimation { from { opacity: 0.2; } to { opacity: 0.9; } } div{ width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: #ccc; animation-name: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 3s; }

В качестве значения свойства animation-name через запятую перечисляются анимации, и также через запятую у свойства animation-duration задается время этих анимаций. Название анимации и ее время сопоставляются по позиции, то есть анимация opacityAnimation будет длиться 3 секунды.

Завершение анимации

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

Так, свойство animation-iteration-count определяет, сколько раз будет повторяться анимация. Например, 3 повтора анимации подряд:

Animation-iteration-count: 3;

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

Animation-iteration-count: infinite;

При повторе анимация будет начинаться снова с начального ключевого кадра. Но с помощью свойства animation-direction: alternate; противоположное направление анимации при повторе. То есть она будет начинаться с конечного ключевого кадра, а затем будет переход к начальному кадру:

Animation-name: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 2s; animation-iteration-count: 3; animation-direction: alternate;

При окончании анимации браузер устанавливает для анимированного элемента стиль, который был бы до применения анимации. Но свойство animation-fill-mode: forwards позволяет в качестве окончательного значения анимируемого свойства установить именно то, которое было в последнем кадре:

Animation-name: backgroundColorAnimation; animation-duration: 2s; animation-iteration-count: 3; animation-direction: alternate; animation-fill-mode: forwards;

Задержка анимации

С помощью свойства animation-delay можно определить время задержки анимации:

Animation-name: backgroundColorAnimation; animation-duration: 5s; animation-delay: 1s; /* задержка в 1 секунду */

Функция плавности анимации

Как и к переходам, к анимации можно применять все те же функции плавности:

linear : линейная функция плавности, изменение свойства происходит равномерно по времени

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

ease-in : функция плавности, при которой происходит только ускорение в начале

ease-out : функция плавности, при которой происходит только ускорение в начале

ease-in-out : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

cubic-bezier : для анимации применяется кубическая функция Безье

Для установки функции плавности применяется свойство animation-timing-function :

@keyframes backgroundColorAnimation { from { background-color: red; } to { background-color: blue; } } div{ width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; animation-name: backgroundColorAnimation; animation-duration: 3s; animation-timing-function: ease-in-out; }

Свойство animation

Свойство animation является сокращенным способом определения выше рассмотренных свойств:

Animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode

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

Возьмем следующий набор свойств:

Animation-name: backgroundColorAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: 3; animation-direction: alternate; animation-delay: 1s; animation-fill-mode: forwards;

Этот набор будет эквивалентен следующему определению анимации:

Animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;

Создание баннера с анимацией

В качестве примера с анимацией создадим простейший анимированный баннер:

Только в этом месяце
Скидки по 20%

Здесь одновременно срабатывают три анимации. Анимация "banner" изменяет цвет фона баннера, а анимации text1 и text2 отображают и скрывают текст с помощью настроек прозрачности. Когда первый текст виден, второй не виден и наоборот. Тем самым мы получаем анимацию текста в баннере.