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:
- They’re easy to use for simple animations; you can create them without even having to know JavaScript.
- 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.
- 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.>
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.
- 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
- есть только два состояния: начало и конец;
- анимация не зациклена;
- промежуточные состояния управляются только функцией времени.
- иметь контроль над промежуточными состояниями?
- зациклить анимацию?
- сделать разные виды анимаций для одного элемента?
- анимировать определённое свойство только на половину пути?
- имитировать различные функции времени для разных свойств?
- animation-name : название анимации;
- animation-duration : как долго длится анимация;
- animation-timing-function : как вычисляются промежуточные состояния;
- animation-delay : анимация начинается спустя некоторое время;
- animation-iteration-count : сколько раз должна выполняться анимация;
- animation-direction : должно движение идти в обратную сторону или нет;
- animation-fill-mode : какие стили применяются до начала анимации и после её завершения.
- 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
- 0% - первый шаг анимации;
- 50% - шаг на полпути в анимации;
- 100% - последний шаг.
- при написании анимации с помощью @keframes ;
- при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation ).
- буквы (a-z);
- цифры (0-9);
- подчёркивание (_);
- дефис (-).
- целые числа, вроде 2 или 3;
- дробные числа, вроде 0.5, которые будут воспроизводить только половину анимации;
- ключевое слово infinite , которое будет повторять анимацию бесконечно.
- normal : начинается с 0%, заканчивается на 100%, начинается с 0% снова.
- reverse : начинается со 100%, заканчивается на 0%, начинается со 100% снова.
- alternate : начинается с 0%, идёт до 100%, возвращается на 0%.
- alternate-reverse : начинается со 100%, идёт до 0%, возвращается на 100%.
- красной по умолчанию;
- становится синей в начале анимации;
- и в итоге зелёной , когда анимация завершена.
- jump-start — первый шаг происходит при значении 0
- jump-end — последний шаг происходит при значении 1
- jump-none — все шаги происходят в пределах диапазона (0, 1)
- jump-both — первый шаг происходит при значении 0 , последний — при значении 1
- start — ведет себя как jump-start
- end — ведет себя как jump-end
The output, when all is said and done, looks something like this:
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.
Мы недавно видели, что переходы - это просто способ анимации стилевых свойств от исходного до конечного состояния.
Итак, переходы в CSS являются специфическим видом анимации, где:
Но что если вы хотите:
Анимация в CSS позволяет всё это, и не только.
Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).
Свойства анимации
Как и transition , свойство animation является сокращённым для нескольких других:
Быстрый пример
Для оживления кнопки загрузки, вы можете написать анимацию подпрыгивания :
@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 и включил все возможные варианты:
@keyframes
Перед применением анимации к элементам HTML, вам требуется написать анимацию с помощью ключевых кадров . Вообще, ключевые кадры - это каждый промежуточный шаг в анимации. Они определяются с помощью процентов:
Можно также использовать ключевые слова 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
Название анимации используется, по крайней мере, дважды :
Подобно именам классов CSS, название анимации может включать в себя только:
Название не может начинаться с цифры или с двух дефисов.
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). Вы можете установить три типа значений:
animation-direction
Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.
Это легче представить, если счётчик итераций анимации установлен как infinite .
animation-fill-mode
Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.
При определении ключевых кадров можно указать правила CSS , которые будут применяться на разных шагах анимации. Теперь эти правила CSS могут столкнуться с теми, которые уже применяются к анимируемым элементам.
animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации .
Давайте представим себе кнопку , которая является:
Чем ближе мы приближаемся к началу работы интерфейса, тем понятней он становится для пользователя. В жизни практически ничего не происходит мгновенно - открывая банку газировки или закрывая глаза перед сном мы наблюдаем кучу промежуточных состояний, а не резкое “открыто/закрыто”, как это происходит в веб.
В своей статье поделюсь знаниями о анимации CSS и как с ней работать. Анимация придаёт сайтам динамичность и улучшает понимание их возможностей. Она оживляет веб-страницы и помогает взаимодействовать с пользователем. В отличие от переходов CSS3, анимация CSS базируется на ключевых кадрах. Которые позволяют воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла автоматически.
Анимация - это набор ключевых кадров или кейфреймов хранящихся в CSS:
@keyframes animation-test { 0% { width: 100px; } 100% { width: 200px; } }
Давайте разберём, что здесь происходит. Ключевое слово @keyframes
обозначает саму анимацию. Затем идет имя анимации, в нашем случае - animation-test
. В фигурных скобках содержится список кейфреймов. Мы используем начальный кадр 0% и конечный 100% (их также можно записать как from и to).
Взгляните на код ниже. Анимацию можно задать и таким образом:
@keyframes animation-test { from { width: 0; } 25% { width: 75px; } 75% { width: 150px; } to { width: 100%; } }
Помните, если начальный или конечный кадры не указаны, браузер определит их автоматически, будто к ним не была применена анимация.
Подключить анимацию к элементу можно так:
Element-selector { animation-name: your-animation-name; animation-duration: 2.5s; }
Свойство animation-name
задаёт имя для анимации @keyframes
. Правило animation-duration
задаёт длительность анимации в секундах (1s, 30s, .5s) или миллисекундах (600ms, 2500ms).
Так же можно группировать кейфреймы:
@keyframes animation-test { 0%, 35% { width: 50px; } 75% { width: 200px; } 100% { width: 100%; } }
К одному элементу (селектору) можно применить по несколько анимаций. Их имена и параметры должны быть записаны в порядке применения:
Element-selector { animation-name: anim-name-1, anim-name-2; animation-duration: 1s, 3s; }
Задержка анимации:
Свойство animation-delay
задает задержку перед воспроизведением анимации в секундах или миллисекундах:
Element-selector { animation-name: anim-name-1; animation-duration: 3s; animation-delay: 2s; /* перед запуском анимации пройдет 2 секунды */ }
Повторное воспроизведение анимации:
Используя animation-iteration-count
мы можем указывать число повторов анимации: 0, 1, 2, 3, и т.д. Или infinite для зацикливания:
Element-selector { animation-name: anim-name-1; animation-duration: 3s; animation-delay: 4s; animation-iteration-count: 5; /* анимация воспроизводится 5 раз */ }
Состояние элемента до и после анимации:
При помощи свойства animation-fill-mode возможно указывать, в каком состоянии элемент будет находиться до начала анимации и после завершения:
animation-fill-mode: forwards; - элемент анимации будет находиться в состоянии последнего кейфрейма после завершения/воспроизведения;
a nimation-fill-mode: backwards; - элемент будет находиться в состоянии первого кейфрейма;
animation-fill-mode: both; - перед началом анимации элемент будет находиться в состоянии первого кейфрейма, после завершения - в состоянии последнего.
Запуск и остановка анимации:
За это отвечает свойство animation-play-state , которое может принимать два значения: running или paused .
Element-selector:hover { animation-play-state: paused; }
Направление анимации:
Свойство animation-direction, указывает на то, как управлять направлением воспроизведения анимации. Вот возможные значения:
animation-direction: normal; - анимация воспроизводится в прямом порядке;
animation-direction: reverse; - анимация воспроизводится в обратном порядке, от to к from;
animation-direction: alternate; - чётные повторы анимации воспроизводятся в обратном порядке, нечётные - в прямом;
animation-direction: alternate-reverse ; - нечётные повторы анимации воспроизводятся в обратном порядке, чётные - в прямом.
Функция плавности вывода анимированных кадров:
Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. По умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Сейчас у нас существуют следующие предопределенные значения: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end.
Однако вы можете создавать такие функции самостоятельно. Значение animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y)
; принимает на вход 4 аргумента и строит кривую распределения процесса анимации.
Изучить подробнее или опробовать создание этих функций можно на сайте
http://cubic-bezier.com
И, наконец, анимацию можно разбить на набор отдельных значений (шагов) при помощи функции steps
которая принимает на вход количество шагов и направление (start или end
). На примере ниже анимация состоит из 5 шагов, последний из которых произойдёт прямо перед завершением анимации:
Element-selector { animation-name: anim-name-1; animation-duration: 3s; animation-delay: 5s; animation-iteration-count: 3; animation-timing-function: steps(5, end); }
Поддержка браузеров для анимации:
Значения в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Значения с -webkit-, -moz- или -O- указывает первую версию, которая работала с префиксом.
На сайте
https://www.w3schools.com
можно подробней изучить CSS анимацаию (с примерами).
Одна из популярных библиотек для работы с анимациями -
animate.css
.
Может показаться, что трудности с которым сталкиваешься при работе с CSS анимациями не оправданы. Но это совершенно не так.
Во-первых, CSS это мощный инструмент улучшения взаимодействия интерфейса с пользователем. Он не сильно влияет на производительность юзеров. В отличии от JavaScript аналогов. Технология, за счет использования вычислительных мощностей GPU, дает возможность браузерам быстрее оптимизировать скорость отрисовки элементов.
Во-вторых, гибкость, скоростью и простота внедрения CSS анимаций поможет “вдохнуть жизнь” в существующие или новые интерфейсы. Разработав общие и оригинальные подходы, разобравшись в особенности технологии можно делать уникальные юзабилити интерфейсы почти для всех проектов.
Надеюсь, в статье вы нашли полезную информацию для себя. Всем красивых сайтов. Не забывайте про анимашки:)
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Введение в CSS-анимацию
Поддержка браузерами
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. Ключевые кадры
Ключевые кадры используются для указания значений свойств анимации в различных точках анимации. Ключевые кадры определяют поведение одного цикла анимации; анимация может повторяться ноль или более раз.
Ключевые кадры указываются с помощью правила @keyframes , определяемого следующим образом:
@keyframes имя анимации { список правил }
Создание анимации начинается с установки ключевых кадров правила @keyframes . Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.
@keyframes shadow { from {text-shadow: 0 0 3px black;} 50% {text-shadow: 0 0 30px black;} to {text-shadow: 0 0 3px black;} }
Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:
@keyframes move { from, to { top: 0; left: 0; } 25%, 75% {top: 100%;} 50% {top: 50%;} }
Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства.
Если несколько правил @keyframes определены с одним и тем же именем, сработает последнее в порядке документа, а все предыдущие проигнорируются.
После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation:
H1 { font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; }
Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0%).
1.1. Временная функция для ключевых кадров
Правило стиля ключевого кадра также может объявлять временную функцию, которая должна использоваться при перемещении анимации к следующему ключевому кадру.
Пример
@keyframes bounce { from { top: 100px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 100px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 100px; } }
Пять ключевых кадров указаны для анимации с именем «bounce». Между первым и вторым ключевым кадром (то есть между 0% и 25%) используется функция замедления. Между вторым и третьим ключевым кадром (то есть между 25% и 50%) используется функция плавного ускорения. И так далее. Элемент будет перемещаться вверх по страницу на 50px , замедляясь по мере того, как он достигает своей наивысшей точки, а затем ускоряясь, когда он падает до 100px . Вторая половина анимации ведет себя аналогичным образом, но только перемещает элемент на 25px вверх по странице.
Временная функция, указанная в ключевом кадре to или 100% , игнорируется.
2. Название анимации: свойство animation-name
Свойство animation-name определяет список применяемых к элементу анимаций. Каждое имя используется для выбора ключевого кадра в правиле, которое предоставляет значения свойств для анимации. Если имя не соответствует ни одному ключевому кадру в правиле, нет свойств для анимации, отсутствует имя анимации, анимация не будет выполняться.
Если несколько анимаций пытаются изменить одно и то же свойство, то выполнится анимация, ближайшая к концу списка имен.
Имя анимации чувствительно к регистру, не допускается использование ключевого слова none . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, перечисленных через дефис - или символ нижнего подчеркивания _ .
Свойство не наследуется.
Синтаксис
Animation-name: none; animation-name: test-01; animation-name: -sliding; animation-name: moving-vertically; animation-name: test2; animation-name: test3, move4; animation-name: initial; animation-name: inherit;
3. Продолжительность анимации: свойство animation-duration
Свойство animation-duration определяет продолжительность одного цикла анимации. Задаётся в секундах s или миллисекундах ms . Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.
Свойство не наследуется.
Синтаксис
Animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;
4. Временная функция: свойство animation-timing-function
Свойство animation-timing-function описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются.
Свойство не наследуется.
| animation-timing-function | |
|---|---|
| Значения: | |
| linear | Линейная функция, анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. |
| функции Безье | |
| ease | Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,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) | Позволяет вручную установить значения от 0 до 1. вы сможете построить любую траекторию скорости изменения анимации. |
| пошаговые функции | |
| step-start | Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Вычисляется в steps(1, start) . |
| step-end | Пошаговая анимация, изменения происходят в конце каждого шага. Вычисляется в steps(1, end) . |
| steps(количество шагов,положение шага) | Ступенчатая временная функция, которая принимает два параметра. Первый параметр указывает количество интервалов в функции. Это должно быть положительное целое число больше 0 , если вторым параметром не является jump-none — в этом случае оно должно быть положительным целым числом больше 1 . Второй параметр, который является необязательным, указывает позицию шага — момент, в котором начинается анимация, используя одно из следующих значений:
Со значением start анимация начинается в начале каждого шага, со значением end - в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end . |
| initial | |
| inherit | |
Синтаксис
Animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: initial; animation-timing-function: inherit;
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
5. Повтор анимации: свойство animation-iteration-count
Свойство animation-iteration-count указывает, сколько раз проигрывается цикл анимации. Начальное значение 1 означает, что анимация будет воспроизводиться от начала до конца один раз. Это свойство часто используется в сочетании со значением alternate свойства animation-direction , которое заставляет анимацию воспроизводиться в обратном порядке в альтернативных циклах.
Свойство не наследуется.
Синтаксис
Animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;
6. Направление анимации: свойство animation-direction
Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out .
Свойство не наследуется.
| animation-direction | |
|---|---|
| Значения: | |
| normal | Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию. |
| reverse | Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены. |
| alternate | Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении. |
| alternate-reverse | Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Чтобы определить, является ли повтор цикла анимации четной или нечетной — количество повторов начинается с 1 .
Синтаксис
Animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; animation-direction: initial; animation-direction: inherit;
7. Проигрывание анимации: свойство animation-play-state
Свойство animation-play-state определяет, будет ли анимация запущена или приостановлена. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover .
Свойство не наследуется.
Синтаксис
Animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;
8. Задержка анимации: свойство animation-delay
Свойство animation-delay определяет, когда анимация начнется. Задается в секундах s или миллисекундах ms .
Свойство не наследуется.
Синтаксис
Animation-delay: 5s; animation-delay: 3s, 10ms;
9. Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode
Свойство animation-fill-mode определяет, какие значения применяются анимацией вне времени ее выполнения. Когда анимация завершается, элемент возвращается к своих исходным стилям. По умолчанию анимация не влияет на значения свойств, когда анимация применяется к элементу — animation-name и animation-delay . Кроме того, по умолчанию анимация не влияет на значения свойств после ее завершения — animation-duration и animation-iteration-count . Свойство animation-fill-mode может переопределить это поведение.
Свойство не наследуется.
| animation-fill-mode | |
|---|---|
| Значения: | |
| none | Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации. |
| forwards | После того, как анимация заканчивается (как определено значением animation-iteration-count), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards;). |
| backwards | В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate). |
| both | Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации. |
Синтаксис
Animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;
10. Краткая запись анимации: свойство animation
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .
11. Множественные анимации
Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:
Div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}
Для создания анимации применяются свойства 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, очень часто применяющееся в анимациях.
