Animated gifs, animated images & animations

Реверсивные функции: ease*

Итак у нас получилась коллекция функций расчёта времени. Их прямое использование называется «easeIn».


Иногда нужно показать анимацию в обратном режиме. Преобразование функции, которое даёт такой эффект, называется «easeOut».

В режиме «easeOut» функции оборачиваются функцией :

Другими словами, мы имеем функцию «преобразования» – , которая берет «обычную» функцию расчёта времени и возвращает обёртку над ней:

Например, мы можем взять функцию описанную выше:

Таким образом, отскоки будут не в начале функции, а в конце. Смотрится гораздо лучше:

Результат style.css index.html

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

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

На графике выше красным цветом обозначена обычная функция и синим – после easeOut.

  • Обычный скачок – объект сначала медленно скачет внизу, а затем резко подпрыгивает вверх.
  • Обратный – объект вначале прыгает вверх, и затем скачет там.

Мы можем применить эффект дважды – в начале и конце анимации. Такая трансформация называется «easeInOut».

Для функции расчёта времени, анимация будет вычисляться следующим образом:

Код функции-обёртки:

В действии, :

Результат style.css index.html

Функция «easeInOut» объединяет два графика в один: (обычный) для первой половины анимации and (обратный) – для второй половины.

Разница хорошо заметна, если сравнивать графики , и для функции :

  • Красный обычный вариант ().
  • Зелёный – .
  • Синий – .

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

CSS-переходы

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

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

Например, CSS-код ниже анимирует трёх-секундное изменение:

Теперь, если элементу присвоен класс , любое изменение свойства будет анимироваться в течение трёх секунд.

Нажмите кнопку ниже, чтобы анимировать фон:

Существует 4 свойства для описания CSS-переходов:

  • – свойство перехода
  • – продолжительность перехода
  • – временная функция перехода
  • – задержка начала перехода

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

Например, у этой кнопки анимируются два свойства и одновременно:

Теперь рассмотрим каждое свойство анимации по отдельности.

@keyframes

Сама анимация на веб-странице делается с помощью двух вещей. Продолжительность анимации, задержка перед её выполнением, число повторений и другие параметры указываются через универсальное свойство animation. А ключевые кадры и значения свойств элемента определяются правилом @keyframes. Затем они связываются между собой с помощью переменной, имя для которой мы придумываем сами. Схематично это выглядит так.

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

Пример 1. Появление текста

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Анимация</title> <style> .fadeIn { animation: fadeIn 3s; background: #fc0; padding: 10px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div class=»fadeIn»>Основные области применения заклёпочных соединений — авиационная техника и судостроение.</div> </body> </html>

В данном примере мы создаём элемент с классом fadeIn, к которому применяется свойство animation со значением fadeIn 3s. Это означает, что анимация будет длиться три секунды, но что именно будет происходить за это время animation не знает, в его задачу лишь входит перенаправление к @keyframes с именем fadeIn. Внутри @keyframes есть два ключевых слова — from и to, они определяют начальное и конечное значение свойств элемента. Исходя из этого браузер за три секунды плавно меняет значение opacity с 0 до 1.

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


Анимация может быть сложной и содержать более двух ключевых кадров, чем это показано в примере выше. Тогда ключевые кадры указываются в процентах от времени всей анимации. 0% — начало анимации, 100% — время её окончания, 50% — середина и т. д. Если какие-то ключевые кадры имеют одинаковое состояние, то их можно группировать, как показано в примере 2.

Пример 2. Ключевые кадры

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Анимация</title> <style> .tinLeftOut { animation: tinLeftOut 3s; } @keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(-900%); } } </style> </head> <body> <img src=»image/cat.jpg» alt=»» class=»tinLeftOut»> </body> </html>

Ключевые слова from и to соответствуют 0% и 100%, поэтому можно указывать как проценты, так и эти ключевые слова, они взаимозаменяемы.

Структура анимации

Теперь мы можем создать более сложную функцию анимации с помощью :

Функция имеет три аргумента, которые описывают анимацию:

Продолжительность анимации. Например, .

Функция расчёта времени, как CSS-свойство , которая будет вычислять прогресс анимации (как ось у кривой Безье) в зависимости от прошедшего времени ( в начале, в конце).

Например, линейная функция значит, что анимация идёт с одной и той же скоростью:

График функции:

Это как если бы в передать значение . Ниже будут представлены более интересные примеры.

Функция отрисовки, которая получает аргументом значение прогресса анимации и отрисовывает его. Значение означает что анимация находится в начале, и значение – в конце.

Эта та функция, которая на самом деле и рисует анимацию.

Вот как она могла бы двигать элемент:

…Или делать что-нибудь ещё. Мы можем анимировать что угодно, как захотим.

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

Нажмите на элемент для того, чтобы посмотреть пример:

Результат animate.js index.html

Код:

В отличие от CSS-анимаций, можно создать любую функцию расчёта времени и любую функцию отрисовки. Функция расчёта времени не будет ограничена только кривой Безье, а функция может менять не только свойства, но и создавать новые элементы (например, для создания анимации фейерверка).

Использование requestAnimationFrame

Теперь давайте представим, что у нас есть несколько анимаций, работающих одновременно.

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

Это происходит из-за того, что каждая анимация имеет своё собственное время старта и «каждые 20 миллисекунд» для разных анимаций – разные. Интервалы не выравнены и у нас будет несколько независимых срабатываний в течение .

Другими словами:

…Меньше нагружают систему, чем три независимых функции:

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

Существует ещё одна вещь, про которую надо помнить: когда CPU перегружен или есть другие причины делать перерисовку реже (например, когда вкладка браузера скрыта), нам не следует делать её каждые .

Но как нам узнать об этом в JavaScript? Спецификация Animation timing описывает функцию , которая решает все описанные проблемы и делает даже больше.

Синтаксис:

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

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

Значение может быть использовано для отмены анимации:


Функция имеет один аргумент – время прошедшее с момента начала загрузки страницы в миллисекундах. Это значение может быть получено с помощью вызова performance.now().

Как правило, запускается очень скоро, если только не перегружен CPU или не разряжена батарея ноутбука, или у браузера нет какой-то ещё причины замедлиться.

Код ниже показывает время между первыми 10 запусками . Обычно оно 10-20 мс:

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

Property Values

Value Description
none Default value. Animation will not apply any styles to the element before or after it is executing
forwards The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

How to make the best-animated websites? Pick the right animation tools!

1. ANIMATE.CSS

Animate.CSS has more than 60 animation effects, including almost all common animation effects. With this animation library, designers can easily and quickly create CSS3 animation websites.

2. MAGIC ANIMATIONS

Magic Animations is a unique CSS3 animation effect package that designers can use freely in their own website projects. Designers need only introduce CSS styles on the page: magic.css or the compressed version magic.min.css.

3. BOUNCE.JS

Bounce.js is a very powerful visual CSS3 animation code generation JS library plugin. You can edit various animation effects of CSS3 using their visual interface. In addition, Bounce.js can also be used alone to complete various CSS3 animation effects through JS code.

4. Mockplus

Mockplus is a web prototyping tool to create cool interactive websites with navigation bar switching designs and scroll-triggered animation effects.

Specify the Speed Curve of the Animation

The property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

  • — Specifies an animation with a slow start, then fast, then end slowly (this is default)
  • — Specifies an animation with the same speed from start to end
  • — Specifies an animation with a slow start
  • — Specifies an animation with a slow end
  • — Specifies an animation with a slow start and end
  • — Lets you define your own values in a cubic-bezier function

The following example shows the some of the different speed curves that can be used:

Example

#div1 {animation-timing-function: linear;}#div2 {animation-timing-function: ease;}#div3 {animation-timing-function: ease-in;}#div4 {animation-timing-function: ease-out;}#div5 {animation-timing-function: ease-in-out;}

Flying birds

  • Author: Steven Roberts

We start with completely straight vector lines, drawing each frame of our animation, depicting the bird in a different state of flight. We then manipulate the vector points and round the lines and edges. Finally, we put each frame into an equally sized box and place them side-by-side. Export the file as an SVG.

The HTML setup is really simple. We just need to wrap each bird in a container in order to apply multiple animations – one to make the bird fly and the other to move it across the screen.

We apply our bird SVG as the background to our bird div and choose the size we want each frame to be. We use the width to roughly calculate the new background position. The SVG has 10 cells, so we multiply our width by 10 and then alter the number slightly until it looks correct.

CSS animation has a couple of tricks you may not be aware of. We can use the animation-timing-function to show the image in steps – much like flicking through pages in a notebook to allude to animation.

Now we’ve created our fly cycle, our bird is currently flapping her wings but isn’t going anywhere. In order to move her across the screen, we create another keyframe animation. This animation will move the bird across the screen horizontally while also changing the vertical position and the scale to allow the bird to meander across more realistically.

Once we’ve created our animations, we simply need to apply them. We can create multiple copies of our bird and apply different animation times and delays. 

The big reveal

Animated content reveal effects seem to be quite popular right now, and used properly they can capture user focus and engage your audience. You’ve seen this before: a block of colour grows from one side or another horizontally or vertically, and then retreats to the opposing side, this time revealing some text or an image beneath. It’s a concept that might seem tricky but really relies on just a few things.

Next, a a pseudo element to mask our parent, setting the transform origin to the opposing option. Finally, string together the animations, using either the timing functions or delays to offset each.

Note, we’ve offset the parent and pseudo element’s animations with a delay telling the box that hides our text to reveal it only after the element itself has fully scaled into view. Check out the Codepen below.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

Blowing bubbles

  • View the code
  • Author: Steven Roberts 

The CSS bubble animation that features on 7UP is a beautiful example of carrying a brand theme through into the website design. The animation consists of a few elements: the SVG ‘drawing’ of the bubbles and then two animations applied to each bubble. 

The first animation changes the opacity of the bubble and moves it vertically in the view box; the second creates the wobbling effect for added realism. The offsets are handled by targeting each bubble and applying a different animation duration and delay.

In order to create our bubbles we’ll be using SVG. In our SVG we create two layers of bubbles: one for the larger bubbles and one for the smaller bubbles. Inside the SVG we position all of our bubbles at the bottom of the view box.

In order to apply two separate animations to our SVGs, both utilising the transform property, we need to apply the animations to separate elements. The <g> element in SVG can be used much like a div in HTML; we need to wrap each of our bubbles (which are already in a group) in a group tag.

CSS has a powerful animation engine and really simple code in order to produce complex animations. We’ll start with moving the bubbles up the screen and changing their opacity in order to fade them in and out at the beginning and end of the animation.

In order to create a wobbling effect, we simply need to move (or translate) the bubble left and right, by just the right amount – too much will cause the animation to look too jaunting and disconnected, while too little will go mostly unnoticed. Experimentation is key with when working with animation.

In order to apply the animation to our bubbles, we’ll be using the groups we used earlier and the help of nth-of-type to identify each bubble group individually. We start by applying an opacity value to the bubbles and the will-change property in order to utilise hardware acceleration.


We want to keep all the animation times and delays within a couple of seconds of each other and set them to repeat infinitely. Lastly, we apply the ease-in-out timing function to our wobble animation to make it look a little more natural.

Работа с @keyframes уровня бог:

Вот тут уже разберём кое что интересное.

Профессиональный пример работы с @keyframes:

Тут почти не чего не поминалось, а HTML вообще не поменялся.

Default

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

.square{

width100px;

height100px;

background-colorblue;

animation-duration5s,10s;

animation-iteration-countinfinite;

animation-directionalternate;

animation-timing-functionlinear,ease-in-out;

animation-namesquareSize,squareColor;

}  

@keyframessquareSize{

90%{

width200px;

}

to{

width500px;

height150px;

}

}  

@keyframessquareColor{

25%{

background-colorred;

}

75%{

background-colorblue;

}

to{

background-colorgreen;

}

}

Разбор кода:

Вот тут всё уже по интереснее, как видите судя по свойству animation-name, мы применяем две анимации, одна отвечает за размер, вторая за цвет, задаём их через запятую.

Применять две анимации нужно для того, что бы, в разные моменты менять свойства, к примеру, как у нас, размер меняется только два раза, в 90% и к to, тогда как цвет меняется три раза, на 25%, 75% и к to.

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

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

Run Animation in Reverse Direction or Alternate Cycles

The property specifies whether an animation should be played forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:

  • — The animation is played as normal (forwards). This is default
  • — The animation is played in reverse direction (backwards)
  • — The animation is played forwards first, then backwards
  • — The animation is played backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Example

div {  width: 100px;  height: 100px;  position: relative;  background-color: red;  animation-name: example;  animation-duration: 4s;  animation-direction: reverse;}

The following example uses the value «alternate» to make the animation run forwards first, then backwards:

Example

div {  width: 100px;  height: 100px;  position: relative;  background-color: red;  animation-name: example;  animation-duration: 4s;  animation-iteration-count: 2;  animation-direction: alternate;}

The following example uses the value «alternate-reverse» to make the animation run backwards first, then forwards:

Example

div {  width: 100px;  height: 100px;  position: relative;  background-color: red;  animation-name: example;  animation-duration: 4s;  animation-iteration-count: 2;  animation-direction: alternate-reverse;}

Значения¶

JavaScript может получить доступ к правилам с помощью интерфейса объектной модели CSS .

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

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

Действительные списки ключевых кадров

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

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

Обработка дубликатов

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

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

Когда свойства не заданы в некоторых ключевых кадрах

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

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

Когда ключевой кадр определяется несколько раз

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

В этом примере на 50% ключевом кадре используется значение , а все остальные значения в этом ключевом кадре игнорируются.

Каскадные ключевые кадры поддерживаются начиная с Firefox 14. В приведенном выше примере это означает, что в ключевом кадре будет добавлено значение . Это еще не определено в спецификации, но это обсуждается.


С этим читают