Как работает js: анимация средствами css и javascript

Summary

Regardless of your experience with CSS, following the instructions in this article will give you the ability to add stunning animations to any website.

However, animations are just one of the many CSS properties used by websites in order to display stunning content. Just about every element on your website will need some CSS in order to look right: text, backgrounds, images, videos…

If you don’t want to spend days learning or fiddling with code, we’d recommend trying a website builder like PageCloud that offers a user-friendly interface enabling you to customize the look of your site without writing a single line of code.

Best of all, PageCloud offers a world-class support team that will be happy to answer any of your questions, even during your free trial!

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Оглавление

•  Как создать анимацию Рика и Морти?
•  Как создать анимацию с псевдо-3D поворотом?
•  Создание анимации зависшего робота.
•  Как создать анимацию чайного пакетика?
•  Как создать анимацию рыцаря?
•  Как создать анимацию вылетающего ноутбука?
•  Как создать анимацию с кроликом на облаке?
•  Как создать анимацию пингвина?
•  Как создать анимацию погодного переключателя?
•  Как создать анимацию с персонажами Gravity Falls?
•  Как создать космическую анимацию в Adobe After Effects?
•  Как создать анимацию собаки?
•  Разбираем домашнее задание.
•  Как создать анимацию детского цветочного горшка?
•  Как создать анимацию с морфингом?
•  Как создать анимацию с маяком?
•  Как создать анимацию рыбы?
•  Как создать анимацию на тему регби?
•  Как создать анимацию кота-повара?
•  Как создать анимацию из мультфильма «По ту сторону изгороди»?
•  Как создать анимацию с бургером и японскими палочками?
•  Как создать анимацию испуганного рулона?
•  Как создать анимацию свечек?
•  Как создать анимацию псевдо-3D midi-клавиатуры в After Effects?
•  Как создать анимацию космонавта?
•  Как создать анимацию саксофониста?
•  Как создать анимацию с мышью и холодильником?
•  Как создать анимацию с медузами?
•  Как анимировать самолетик?
•  Как анимировать тачку?
•  Как создать анимацию с изометрией?
•  Как создать анимацию бесстыжего кота?
•  Как создать анимацию с НЛО?

01.

Delay an Animation

The property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

Example

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

Negative values are also allowed. If using negative values, the animation
will start as if it had already been playing for N seconds.

In the following example, the animation will start as if it had already been
playing for 2 seconds:

Example

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

Анимация листьев

1. Ключевые кадры

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

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

Что здесь происходит? Свойство мы уже применяли ранее, но теперь используем функцию , которая позволяет изменять масштаб элемента. В начале анимации масштаб нулевой (параметр ), а затем он должен увеличиться до обычного масштаба (параметр ). И это именно то, что нужно, чтобы имитировать плавный рост наших листьев.

2. Анимирование элементов: теория

Хорошо, мы создали анимацию, а теперь нам нужно её применить к конкретным элементам. Для этого понадобятся несколько CSS-свойств:

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

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

3. Анимирование элементов: практика

Теперь мы знаем что делать — нужно задать созданную ранее анимацию листочкам, и они начнут расти. Для этого укажем название анимации и её длительность.

Но для чего мы задали значение свойству ? По умолчанию после окончания анимации элементы возвращаются в исходное состояние, а в данном случае нам это не нужно. Мы хотим, чтобы исходное состояние анимации было как в первом ключевом кадре (), а финальное состояние — как в последнем ().

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

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

Получается, чётные будут направлены в одну сторону, а нечётные — в другую.

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

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

Ура-ура, дерево готово!

Весь код анимации, который мы написали в этом туториале, доступен на CodePen.

See the Pen
tree by sasha_htmlacademy (@sasha-sm)
on CodePen.

Как создать анимацию из мультфильма «По ту сторону изгороди»?

На этот раз основой для нашей анимации станут герои довольно известного мультсериала «По ту сторону изгороди». В качестве основы используем гифку из Сети. Урок направлен на то, чтобы закрепить навыки, полученные в предыдущих уроках, а также получить новые теоретические знания

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

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

21.

CSShake

delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page. As you might expect, there are a number of variations available for shaking your web components.

• Current Version: 1.5.0
• Popularity: 4,039 stars on GitHub
• Library Size: 21.9 kB (minified version)
• GitHub: https://github.com/elrumordelaluz/csshake
• License:

Apple popularized the UI trope of vigorously shaking a UI element (a dialog, modal or textbox) when a user enters an incorrect response — mimicking a person shaking their head. CSShake provides a range of interesting “shake” animations and there’s no lack of variation in this library.

Правило @keyframes

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

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

В следующем примере анимация «example» привязывается к элементу <div>.
Анимация будет длиться 4 секунды, и она будет постепенно менять цвет фона элемента <div> от «Red» на «желтый»:

Пример

/* The animation code */
@keyframes example {
   
from {background-color: red;}
   
to {background-color: yellow;}
}/* The element to apply the animation to */
div {    width: 100px;    height: 100px;   
background-color: red;   
animation-name: example;    animation-duration: 4s;
}

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

В приведенном выше примере мы указали, когда стиль изменится с помощью ключевых слов «from» и «to» (который представляет 0% (Start) и 100% (полный)).

Также можно использовать процент. С помощью процента можно добавить любое количество изменений стиля.

В следующем примере изменяется цвет фона элемента < div > при завершении анимации на 25%, завершении 50% и повторном завершении анимации на 100%:

Пример

/* The animation code */@keyframes example
{
   
0%   {background-color: red;}
   
25%  {background-color: yellow;}
   
50%  {background-color: blue;}
   
100% {background-color: green;}
}/* The element to apply the animation to */div {   
width: 100px;    height: 100px;   
background-color: red;    animation-name: example;   
animation-duration: 4s;}

В следующем примере изменяется как цвет фона, так и положение элемента <div> при завершении анимации на 25%, завершении 50% и снова при завершении анимации 100%:

Пример

/* The animation code */@keyframes example
{
   
0%   {background-color:red; left:0px; top:0px;}
   
25%  {background-color:yellow; left:200px; top:0px;}
   
50%  {background-color:blue; left:200px; top:200px;}
   
75%  {background-color:green; left:0px; top:200px;}
   
100% {background-color:red; left:0px; top:0px;}
}/* The element to apply the animation to */div {   
width: 100px;    height: 100px;   
position: relative;    background-color: red;   
animation-name: example;   
animation-duration: 4s;}

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

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

Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes и назвать её bouncing. Затем вы можете использовать эту анимацию, применяя её к loading-button.

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

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

Используйте комбинации из animation-timing-function

Одна из очень частых стенок в головах у начинающих верстальщиков – это мысль о том, что animation-timing-function существует в единственном экземпляре на всю анимацию. Так вот, это не так.

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

Пример:

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

Чтобы лучше понять, о чем идет речь, посмотрим красивый пример от David Lewis (концепт не адаптивный, лучше открыть на большом экране в новой вкладке):

Property Values

Value	Description	Play it
linear	The animation has the same speed from start to end	Play it »
ease	Default value. The animation has a slow start, then fast, before it ends slowly	Play it »
ease-in	The animation has a slow start	Play it »
ease-out	The animation has a slow end	Play it »
ease-in-out	The animation has both a slow start and a slow end	Play it »
step-start	Equivalent to steps(1, start)
step-end	Equivalent to steps(1, end)
steps(int,start|end)	Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value «start» or «end», and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value «end»
cubic-bezier(n,n,n,n)	Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Tip: Try the different values in the «More Examples» section below.

Magic Animations

Magic Animations has been one of the most impressive animation libraries available. It has many different animations, many of which are quite unique to this library. As with Animate.css, you can implement Magic by simply importing the CSS file. You can also implement the animations using jQuery. This project offers a particularly cool demo application.

• Current Version: 1.4.1
• Popularity: 6,074 stars on GitHub
• Description: “CSS3 Animations with special effects”
• Library Size: 54.9 kB (minified)
• GitHub: https://github.com/miniMAC/magic
• License: MIT license.

Magic Animation’s file size is moderate compared to Animate.css and it is known for its signature animations, such as the magic effects, foolish effects, and bomb effects.

If you’re looking for something a little out of the ordinary, go for it. You won’t be disappointed.

Программы для создания анимации

Cinema 4D — универсальная комплексная программа для создания и редактирования трехмерных эффектов и объектов. 

Adobe After Effects —  программное обеспечение компании Adobe Systems для редактирования видео и динамических изображений, разработки композиций, анимации и создания разнообразных эффектов. 

Adobe Illustrator — редактор векторной графики и других дизайнерских решений.

Adobe Photoshop — многофункциональная программа графический редактор для создания 2D, 3D анимации, расовой графики и набором функций для создания векторных изображений. Большо о программе Adobe Photoshop можно прочитать в Википедии

Тебе также может быть интересно:

Анимация vs Мультипликация: в чём разница?

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

What are CSS animations?

As you may or may not know, CSS stands for Cascading Style Sheets. CSS is used by Web browsers to determine how the HTML elements on your page are displayed.

CSS animations enable your content to visually transition from one style configuration to another. For beginners that lack experience writing code, this can be pretty intimidating.

Here’s a simplified example where text moves across the page using HTML and CSS:

Hello!

	h3 {
	animation-duration: 8s;
	animation-name: slidein;
	animation-iteration-count: infinite;
	}
	@keyframes slidein {
	0% {
	margin-left: 0%;
	}
	50% {
	margin-left: 300px;
	}
	100% {
	margin-left: 0%;
	}
	}

view raw

hosted with by GitHub

	h3 {
	animation-duration: 8s;
	animation-name: slidein;
	animation-iteration-count: infinite;
	}
	@keyframes slidein {
	0% {
	margin-left: 0%;
	}
	50% {
	margin-left: 300px;
	}
	100% {
	margin-left: 0%;
	}
	}

view raw

hosted with by GitHub

	h3 {
	animation-duration: 8s;
	animation-name: slidein;
	animation-iteration-count: infinite;
	}
	@keyframes slidein {
	0% {
	margin-left: 0%;
	}
	50% {
	margin-left: 300px;
	}
	100% {
	margin-left: 0%;
	}
	}

view raw

hosted with by GitHub

	h3 {
	animation-duration: 8s;
	animation-name: slidein;
	animation-iteration-count: infinite;
	}
	@keyframes slidein {
	0% {
	margin-left: 0%;
	}
	50% {
	margin-left: 300px;
	}
	100% {
	margin-left: 0%;
	}
	}

view raw

hosted with by GitHub

	h3 {
	animation-duration: 8s;
	animation-name: slidein;
	animation-iteration-count: infinite;
	}
	@keyframes slidein {
	0% {
	margin-left: 0%;
	}
	50% {
	margin-left: 300px;
	}
	100% {
	margin-left: 0%;
	}
	}

view raw

hosted with by GitHub

	h3 {
	animation-duration: 8s;
	animation-name: slidein;
	animation-iteration-count: infinite;
	}
	@keyframes slidein {
	0% {
	margin-left: 0%;
	}
	50% {
	margin-left: 300px;
	}
	100% {
	margin-left: 0%;
	}
	}

view raw

hosted with by GitHub

When you read the CSS, you can see:

• Total duration of the animation is 8 seconds (line 2).
• Animation being used is “slidein” (line 3).
• Animation is on an infinite loop (line 4).
• “Slidein” begins on the left hand side of the page (line 9).
• At half the duration, the title is 300px off the left side of the page (line 12).
• At the end of the animation, the text is back on the left hand side of the page (line 15).

If you’d like to try writing some CSS, you can modify the example above using CodePen.

As you explore CSS animations, you will discover dozens of properties that will enable you to customize your transitions so they work seamlessly within your design.

On the other hand, if you want to save time by using pre-built animations, you will want to use Animate.css.

Step 1 — Creating the Base Application

Before we explore how to use the Animate.css library, let’s build a small todo-list application. This will give us some elements to style. We will then code a animation using standard CSS3.

First, make a new folder for this project:

And then navigate inside:

We are going to create three files here: , , and .

Use or your preferred code editor to create the first file, :

Add the following content to define a brief HTML document with links to our CSS and Javascript files:

./animate-css-example/index.html

Here we have added a title, , and linked to our CSS stylesheet (which we will make next). We then define some Javascript objects inside a tag and link to our third file, .

Save and close the file.

Now create and open in your editor:

Add the following content, which will define our animation:

./animate-css-example/style.css

We have defined the duration of the animation and used the at-rule to configure one animation cycle.

Save and close the file.

Now let’s create our final file, :

Add the following content. This will define our function and embed our animation:

./animate-css-example/app.js

Our Todo app includes a text field and a button. When we enter text into the field and press the button, a new element is created and our text is appended to it. Note the highlighted line. Here we have added the class to every newly created element.

Save and close the file.

Now open a browser and load . A field and a button will appear. Write some text in the field and press Add Todo. Your new todo will fade in.

We have successfully applied a CSS animation to an element using standard CSS3. Now let’s refactor our code to use Animate.css and see how it can improve our productivity and readability. After that, we will explore a few more animations in the library.

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration	Specifies how long time an animation should take to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

❮ Previous
Next ❯

Библиотека animate.css

В большинстве случаев анимации применяется для создания известных типовых эффектов. Почему бы в таком случае не воспользоваться готовыми наработками в этой области? Есть несколько разных CSS-библиотек, которые достаточно лишь подключить к своему сайту и добавить к желаемым элементам заданный класс. Из таких библиотек популярными являются Animate.css и magic.

Animate.css это бесплатная библиотека доступная по адресу http://daneden.github.io/animate.css/. На сайте выбираете из списка готовый эффект и смотрите как он применяется к заголовку.

Для начала следует скачать библиотеку. Есть два варианта.

• Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит на первом этапе ознакомления с анимацией в целом, поскольку позволяет взглянуть, как всё устроено.
• Упакованная версия. В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.

Далее подключаем файл animate.css через <link> как это делается с любым другим стилевым файлом.

Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта (список всех эффектов и их названия смотрим на сайте). Например, вы желаете добавить мерцание к изображению на странице. В HTML записываем следующее:

После загрузки страницы изображение померцает и анимация после этого остановится. Для бесконечного повторения добавьте класс infinite.

По умолчанию вся анимация в animate.css длится одну секунду, увеличить время можно через собственный стиль. Если требуется изменить продолжительность только у выбранного эффекта, то используйте класс animated.flash, как показано в примере 3. Вместо flash укажите применяемый эффект. Для изменения времени у всех эффектов оставьте только класс animated.

Пример 3. Использование animate.css

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Анимация</title>
<link href=»animate.css» rel=»stylesheet»>
<style>
.animated.flash {
animation-duration: 3s;
}
</style>
</head>
<body>
<p><img src=»image/figure.jpg» alt=»» class=»animated infinite flash»></p>
</body>
</html>

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

transition-delay

In we can specify the delay before the animation. For instance, if is and is , then the animation starts 1 second after the property change and the total duration will be 2 seconds.

Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if is and is , then animation starts from the halfway point and total duration will be 1 second.

Here the animation shifts numbers from to using CSS property:

Result
script.js
style.css
index.html

The property is animated like this:

In the example above JavaScript adds the class to the element – and the animation starts:

We could also start it from somewhere in the middle of the transition, from an exact number, e.g. corresponding to the current second, using a negative .

Here if you click the digit – it starts the animation from the current second:

Result
script.js
style.css
index.html

JavaScript does it with an extra line:

CSS-переходы

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

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

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

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

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

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

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

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

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

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

Примеры анимации

We have something to show you

Автор Lazy Square. Ролик создан при помощи Adobe Illustrator (отрисован каждый кадр), монтаж в After Effects.

Robot Chicken — Star Wars

Фрагмент стоп-моушн анимации из сериала Robot Chicken. Съемочный процесс можно посмотреть тут.

Stop motion (кукольная анимация) — это технология оживления фотографий, сделанных на обычном фотоаппарате.Грубо говоря, это создание видео на основе покадрового фотографирования. Снимается сцена, затем в нее вносятся незначительные изменения, и она снимается еще раз. Таким образом достигается эффект движения, который группируется и монтируется на компьютере. Посмотрите еще этот шикарный пример.

Neo Kids — Onboarding Concept

Концепт анимации для мобильного приложения от Minh Pham.

«Лики войны»: Джайна. Смесь CG ART, 3D и спецэффектов позволяют создавать сравнительно бюджетные мини-истории для роликов Blizzard. 

CGI + 3D анимация. Социальное вирусное видео, которое вы могли пропустить. Written, Directed & Produced by Lubomir Arsov

Запуск анимации в обратном направлении или альтернативные циклы

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

Свойство «направление анимации» может иметь следующие значения:

• — Анимация воспроизводится как обычная (вперед). Это значение по умолчанию
• — Анимация воспроизводится в обратном направлении (назад)
• — Анимация сначала разыгрывается вперед, затем назад
• — Анимация сначала воспроизводится назад, а затем пересылается

В следующем примере анимация будет запущена в обратном направлении (назад):

Пример

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

В следующем примере используется значение «альтернативный», чтобы сначала запустить анимацию вперед, а затем назад:

Пример

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

В следующем примере используется значение «альтернативный-обратный» для того, чтобы анимация сначала пробежала назад, а затем пересылает:

Пример

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

Итого

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

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

Ограничения CSS-анимаций в сравнении с JavaScript-анимациями:

Достоинства

• Простые анимации делаются просто.
• Быстрые и не создают нагрузку на CPU.

Недостатки

• JavaScript-анимации более гибкие. В них может присутствовать любая анимационная логика, как например «взорвать» элемент.
• Можно изменять не только свойства. Мы можем создавать новые элементы с помощью JavaScript для анимации.

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

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