Практика разработки веб-ресурсов обусловила две существенные тенденции: скорость и представление о качестве. Первое обязывает разработчика делать свою работу быстро, второе - определяет границы целесообразного.
Посетитель преследует конкретную цель при посещении сайта и ориентируется на общепризнанные представления о том, где что находится и как оно должно работать. Разработчик может делать свою работу как ему это удобно, но если он заинтересован привлечь внимание большего числа посетителей, то не учитывать их мнение нецелесообразно.
Синтаксис и семантика анимации
Свойство CSS animation является простым в применении и позволяет быстро выполнить интересные эффекты. Для того чтобы элементы веб-страницы вели себя современно, как ожидает того посетитель, совершенно необязательно проявлять особую смекалку и проектировать собственные варианты анимации. Все работает по определению, как ожидаемо и востребовано.
В данном примере описаны два элемента. Первый представляет собой полоску-индикатор, которая движется вправо и пропорционально увеличивается в размере. Второй элемент - картинка, которая просто перемещается вправо.
Здесь показаны не все кадры. Свойство в данном случае реализовано плавно. Посетитель страницы наблюдает плавное перемещение с увеличением в объеме строки и движение картинки. Используя различные варианты перемещения вместо типа ease-in-out, можно управлять движением. Вариант ease-in-out дает ускорение в начале и торможение в конце, но можно выбрать и другой вариант движения.
Наложение и взаимодействие элементов
Все элементы, которые имеют свойство animation, CSS рассматривает независимо друг от друга и от общего потока страницы. Если элементы наложены друг на друга, то получается совмещение эффектов и в результате новый эффект.
Если в процессе анимации элементы меняют свойство то за счет законов наложения цветов можно получить весьма оригинальные эффекты всего двумя - тремя элементами.
Рисунок элемента имеет большое значение. В приведенном примере полоска формируется из картинки, в которой две линии разного цвета. При увеличении размера полоски - это пила, при движении пилы - это движущаяся волна. Манипулируя линиями и их наклоном, можно формировать эффекты по общим законам графики.
Изменение времени анимации также приводит к нестандартным решениям. Использование свойства трансформации, например функции вращения элемента, формирует оригинальные изменения. Пример:
Здесь полоска непрерывно меняет свой облик из непрозрачного состояния в прозрачное. Нижняя картинка при этом меняет только форму.
Анимация информации
В CSS: text animation имеет особый смысл. Текст всегда имеет значение и присутствует на веб-странице с конкретной целью. Но текст всегда менее информативен, чем изображение, а занимает много места.
Гарантия, что правильно написанный текст будет адекватно воспринят посетителем значительно более высока, чем надежда на правильное понимание изображения, особенно когда у дизайнера сайта есть собственное представление о формах выражения смысла.
Если раньше, когда CSS animation только пришла в мир верстки, были популярны бегущие строки, мигающие часы, пульсирующие тексты, то в современном сайтостроении считается нормальным принцип: не раздражая посетителя, максимально эффектно представить функциональность веб-ресурса.
В этом контексте любой из приведенных выше примеров удобен для представления текстовой информации, но вариант применения CSS как 3D animation является самым практичным.
Здесь в «нормальном» состоянии текст занимает мало места. Можно выделить главное слово или обозначить смысл. Как только мышка попадает на область текста, он разворачивается из CSS 3D animation в нормальное читабельное состояние.
Вариант экономии места в сочетании с 3D дизайном позволяет компактно размещать информацию. Освободившееся место можно использовать для других или смежных целей. За счет CSS animation нужная информация будет доступна в нужный момент времени.
Потребительский вариант анимации
Заметные успехи в создании качественных веб-ресурсов до сих пор оставляют за пределами рассмотрения один странно поставленный вопрос: почему дизайн сайта - забота разработчика?
Сайт - это не художественное произведение и не результат творческого процесса для целей эстетического характера. Сайт - это прежде всего функциональность, которая, по мнению владельца (разработчика), приведет к нему новых посетителей и даст возможность работать со своими клиентами.
Продать товар, оказать услугу, выполнить ту или иную работу... Посетитель приходит за товарами, услугами и работами. Оформление и анимация - важны, но мнение посетителя все же важнее мнения владельца (разработчика).
Если в обычном магазине покупатель всегда прав, то почему в интернет-магазине он должен делать все так, как придумал разработчик сквозь предложенный вариант оформления? Анимация в контексте 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;
Создание баннера с анимацией
В качестве примера с анимацией создадим простейший анимированный баннер:
Здесь одновременно срабатывают три анимации. Анимация "banner" изменяет цвет фона баннера, а анимации text1 и text2 отображают и скрывают текст с помощью настроек прозрачности. Когда первый текст виден, второй не виден и наоборот. Тем самым мы получаем анимацию текста в баннере.
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
- 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.
Мы собрали для вас подборку лучших примеров JQuery анимации и CSS3 . Вы можете посмотреть исходный код, чтобы понять, как анимируется каждый из примеров.
Работающие часы на основе CSS3
Работающие часы на CSS3 , в примере используется анимация и фигуры CSS , без изображений или JavaScript :
Демо-версия Скачать
Анимированные облака на CSS3
В данном примере используется только анимация CSS3 :
Демо-версия Скачать
Анимированные иконки погоды на CSS3
Демо-версия Скачать
Анимации загрузки на CSS3
Демо-версия Скачать
3D вращающаяся планета на основе CSS3
Отличная идея и сочетание двух концепций. А немного доработав масштабирование и анимацию, можно удивительный результат!
Демо-версия Скачать
Эффект анимации текста
Демо-версия Скачать
3D анимированная диаграмма
3D диаграмма , созданная с помощью HTML и CSS3-преобразований . Тени созданы с помощью градиентов CSS , анимация — с помощью переходов. AngularJS используется для обновления данных:
Демо-версия Скачать
JQuery эффект анимации снега
Демо-версия Скачать
CSS3-анимации загрузки
Демо-версия Скачать
Анимированная иконка гамбургер-меню на CSS3
Демо-версия Скачать
AT-AT (шагающий броневик из Звездных войн) на CSS3
Пример, который я создал на CSS3 . Можно было бы, конечно, уменьшить количество div , использованных для создания частей тела. Также стоило бы оптимизировать пример и добавить класс JQuery с анимацией :
Демо-версия Скачать
Gran Turismo
Демо-версия Скачать
3D Солнечная система
Демо-версия Скачать
Анимация дыма
Это CSS3-версия анимации. Клубы дыма создаются без изображений, а анимация задается без использования JavaScript и JQuery эффектов анимации:
Демо-версия Скачать
Анимированный логотип
Демо-версия Скачать
IE10 3D куб
Демо-версия Скачать
Анимация языков пламени на основе CSS3
Демо-версия Скачать
Логотип Бэтмена на -webkit- CSS3 анимация
Демо-версия Скачать
Концепт дизайна погодного приложения на основе CSS
Демо-версия Скачать
Анимация природы на CSS3
Демо-версия Скачать
Гуляющий кот (цикл без JQuery анимации)
Демо-версия Скачать
3D-терминал на CSS3
Демо-версия Скачать
Анимированный график на CSS3
Линейный график на HTML и CSS3 . При наведении курсора мыши на раздел отображается его название. Данные заполняются и обновляются с помощью AngularJS . Преобразование вращения вручную применено к точкам графика, а анимация задается с помощью переходов CSS3 :
Демо-версия Скачать
Вращающиеся 3D HTML-формы с помощью CSS3
Демо-версия Скачать
Анимации индикатора подключения на основе CSS3
Демо-версия Скачать
Steps-анимация на Jquery
Анимации JQuery пример, иллюстрирующий функцию тайминга анимации: steps() в сочетании с листом спрайтов:
Продвинутая анимация траектории
Анимация с применением SVG , которая может пригодиться при разработке анимации траектории:
Скачать / Дополнительная информация
Анимации прокручивания с использованием wow.js
Скачать / Дополнительная информация
Анимация с использованием листов спрайтов на CSS
Ниже приводятся пример с использованием листов спрайтов с пояснениями без JQuery эффектов анимации:
Скачать / Дополнительная информация
Анимированный логотип для Herr Brueckers
Скачать / Дополнительная информация
Анимация рисования контура
Скачать / Дополнительная информация
Бесконечная анимация галереи на основе анимации блока JQuery
Скачать / Дополнительная информация
Анимированные круги с использованием CSS / SVG
Скачать / Дополнительная информация
SVG-анимация с помощью CSS
Пример того, как анимировать SVG . Для демонстрационных целей я использовал иконки «Small Icons » Ника Фроста и Грега Лапена :
Скачать / Дополнительная информация
CSS3 параллакс анимация боевых истребителей от MySkins Studio
Это еще одна CSS3 анимация , созданная с использованием параллакса CSS3 и кейфреймов, но без JQuery анимации :
Скачать / Дополнительная информация
Анимированный SVG-логотип
Скачать / Дополнительная информация
Плоская анимированная круговая иконка на основе CSS3
Скачать / Дополнительная информация
Анимация с setTimeout
Небольшой пример синхронизации анимации, в которой вокруг экрана перемещается шар, с помощью setTimeout :
Скачать / Дополнительная информация
SVG-анимация солнца с использованием CSS
Скачать / Дополнительная информация
JQuery-анимация
Простая JQuery анимация:
Скачать / Дополнительная информация
CSS-анимация орбиты Земли
Скачать / Дополнительная информация
Анимация летящей птицы на CSS3
Скачать / Дополнительная информация
Анимация атома на основе CSS3
Скачать / Дополнительная информация
3D-анимация часов с использованием JS
В процессе разработки использовались 3D-эффекты CSS3 и JQuery анимация текста. Пример работает в Google Chrome 28.0 и Firefox 22.0 . В то же время анимация не работает в IE 10 из-за какой-то ошибки доступа JQuery , которую я не удосужился исправить:
Скачать / Дополнительная информация
Анимированное Лондонское обзорное колесо из двух элементов
Скачать / Дополнительная информация
Анимация Drag Race
Анимация гонок на чистом CSS / HTML :
Скачать / Дополнительная информация
Анимированный праздничный торт
Скачать / Дополнительная информация
Анимированный логотип
Этот анимированный логотип без JQuery эффектов анимации выглядит очень элегантно:
Скачать / Дополнительная информация
Анимированный логотип компании на основе CSS3
Анимированный логотип компании на чистом HTML / CSS3 :
Скачать / Дополнительная информация
Анимированная иконка камеры
Скачать / Дополнительная информация
Анимация оранжевого автомобиля
Скачать / Дополнительная информация
Анимированная иконка Wi-Fi
Скачать / Дополнительная информация
Анимированные адаптивные CSS- иконки погоды
Это небольшой набор анимированных иконок погоды на CSS . Обратите внимание, что большая часть анимации создается с помощью псевдо-элементов и JQuery анимации:
Скачать / Дополнительная информация
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;}
Жесткий диск
