Все о css анимациях

Добавляйте псевдо-хвостики

Возможно вы еще помните детские мультики. Там персонажи во время быстрых движений растягиваются в направлении движения или даже оставляют за собой фантомный след. Персонаж как бы раздваивается или размазывается и это выглядит довольно мило. Подчеркивает движения. Очень советую загуглить “12 принципов анимации” и посмотреть разные примеры, но мы сейчас остановимся на технической реализации такого следа. Как его можно сделать?

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

Это может выглядеть как-то так:

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

Пример с несколькими движущимися кружками:

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.

Базовая работа с @keyframes:

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

Суть работы с @keyframes:

Суть работы с ним заключаться в том, что он сам @keyframes, просто задаёт когда и какое свойство нужно изменить и всё, для настройки времени анимации или сколько раз она будет проигрываться, используется свойства «animation-…».

Свойства «animation-…» для @keyframes:

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

• animation-duration — Задаёт время анимации;
• animation-iteration-count — Задаёт сколько раз будет проигрываться анимация;
• animation-name — Задаёт имя анимации или имя @keyframes;

Это ещё не все свойства, ниже будут ещё, здесь только самые базовые.

Пример работы с @keyframes:

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

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

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.square { width100px; height100px; background-colorgreen; animation-duration10s; animation-iteration-countinfinite; animation-namesquare1; }   @keyframes square { from { width100px; background-colorgreen; } 50% { background-colorblue; } to { width200px; background-colorred; } }

Разбор кода:

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

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

Теперь что касается самой анимации, задаётся слово @keyframes, после него идёт имя анимации.

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

Что касается 50%, то это какие свойства будут использоваться, когда анимация проигралась на 50%, можно использовать 30%, 20%, 70%, это не важно, главное чтобы не меньше 0% и не больше 100%. В to это конечное значение, какие свойства должны быть когда анимация закончит проигрываться, также его можно заменить 100%

В to это конечное значение, какие свойства должны быть когда анимация закончит проигрываться, также его можно заменить 100%.

CSS3 Animation Properties.

The following table provides a brief overview of all the animation-related properties.

Property	Description
	A shorthand property for setting all the animation properties in single declaration.
	Specifies the name of defined animations that should be applied to the selected element.
	Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
	Specifies how the animation will progress over the duration of each cycle i.e. the easing functions.
	Specifies when the animation will start.
	Specifies the number of times an animation cycle should be played before stopping.
	Specifies whether or not the animation should play in reverse on alternate cycles.
	Specifies how a CSS animation should apply styles to its target before and after it is executing.
	Specifies whether the animation is running or paused.
	Specifies the values for the animating properties at various points during the animation.

Свойства анимации

Эта свойства анимации в CSS:

Свойство
backgroundКод
background-colorКод
background-positionКод
background-sizeКод
borderКод
border-bottomКод
border-bottom-colorКод
border-bottom-left-radiusКод
border-bottom-right-radiusКод
border-bottom-widthКод
border-colorКод
border-leftКод
border-left-colorКод
border-left-widthКод
border-rightКод
border-right-colorКод
border-right-widthКод
border-spacingКод
border-topКод
border-top-colorКод
border-top-left-radiusКод
border-top-right-radiusКод
border-top-widthКод
bottomКод
box-shadowКод
clipКод
colorКод
column-countКод
column-gapКод
column-ruleКод
column-rule-colorКод
column-rule-widthКод
column-widthКод
columnsКод
filterКод
flexКод
flex-basisКод
flex-growКод
flex-shrinkКод
fontКод
font-sizeКод
font-size-adjust
font-stretch
font-weightКод
heightКод
leftКод
letter-spacingКод
line-heightКод
marginКод
margin-bottomКод
margin-leftКод
margin-rightКод
margin-topКод
max-heightКод
max-widthКод
min-heightКод
min-widthКод
object-positionКод
opacityКод
orderКод
outlineКод
outline-colorКод
outline-offsetКод
outline-widthКод
paddingКод
padding-bottomКод
padding-leftКод
padding-rightКод
padding-topКод
perspectiveКод
perspective-originКод
rightКод
text-decoration-colorКод
text-indentКод
text-shadowКод
topКод
transformКод
transform-originКод
vertical-alignКод
visibility
widthКод
word-spacingКод
z-indexКод

Summary

CSS animations allow you to build complex animated sequences. Like transitions, they manipulate the CSS properties that control how interface elements appear. Unlike transitions, they are not tied to shifts between style sheets that distinguish interface states. Keyframe animations can execute freely, and offer the best way to build complex effects into an interface.

To get the most from this tutorial, you should already be familiar with CSS transitions. Since they work similarly, the term CSS animations often serves as a shorthand to refer to transitions as well, but this tutorial only discusses keyframe animations.

These key points serve as reference:

• The required animation-name property specifies the name of a keyframe animation, and must correspond to a @keyframes rule. Loading the CSS or applying a new name causes the animation to execute.

• Use the required animation-duration property to set the overall amount of time over which the animation executes, either in seconds or milliseconds (1s == 1000ms).

• The @keyframes rule declares the full sequence that corresponds to the animation-name. Within the block, keyframes such as 0%, 50%, and 100% behave as selectors that manipulate CSS properties over the duration of the animation.

• Any CSS property that be transitioned can also be animated.

• Use animation-delay to pause before executing an animation, using the same time values as for duration.

• The animation-iteration-count property sets the number of times the animation plays, either as an integer or infinite.

• The animation-direction property allows you to play the animation in normal’orreverse** order, or alternate between the two for even/odd iterations.

• The animation-fill-mode property preserves an animation’s start state before a delayed animation executes (backwards)), its end state after its final iteration (forwards), or both.

• Set animation-play-state to pause or running to stop and start animations.

• The animation-timing-function property controls the speed of progression between each keyframe, and can be altered within an animation. It uses the same set of keywords as transitions: ease, ease-in, ease-out, ease-in-out, linear, or custom cubic-bezier() functions.

• The animation shorthand property can represent values from all other animation properties. If two time measurements are included, they are interpreted first as duration then as delay.

• Use standard property names along with -webkit- prefixes. Specify both the @keyframes rule and @-webkit-keyframes. From JavaScript, specify standard properties such as animationName along with WebkitAnimationName.

• Use comma-separated property values to specify more than one animation. Animations that run concurrently cannot manipulate any of the same properties.

• To modify @keyframes rules dynamically, inject CSS into a local style region, or use the CSSKeyframeRule interface.

Fill mode

Each keyframe within an animation specifies CSS properties, just like regular CSS selectors. Properties manipulated by keyframes may vary from those defined or inherited by selectors. By default, after animations complete their series of iterations, these properties abruptly snap from the final keyframe’s value back to their original value. Likewise when animations are delayed, properties snap from their original values to that of the first keyframe’s value.

The animation-fill-mode property fixes this problem. Setting it to forwards makes the final keyframe’s property values persist after the animation completes. Setting it to backwards makes the first keyframe’s property override how the property would appear without the animation. Setting it to both makes the keyframe’s properties override the element’s default properties both before and after the animation executes. Setting it to the default value of none keeps all properties at their default values unless the animation is executing.

Note that none of these values make any difference for animations whose animation-delay is set to zero, and whose animation-iteration-count is infinite. Even then, they only make a difference for properties whose values specified at the start or end of the animation vary from how they are already specified by the element itself.

The banner animation shown above gives an example of how to use animation-fill-mode. By default, both the banner and the main content inhabit the same space at the top of the screen. The content’s displaceContent animation slides it out of its default position, and its fill-mode of forwards keeps it there after it is done sliding. If it didn’t, it would snap right back to the top of screen. Likewise, the banner’s insertBanner animation slides it from a position specified in the first keyframe, and its fill-mode of backwards keeps it there before the delayed animation starts to execute, and it slides down to its default position.

Fill mode can override not only an element’s underlying properties, but other animations as well. For the banner’s second animation, the animation-fill-mode is set to none. If it were set to both or backwards, the first animation would not execute. Since animations are interpreted in their order of declaration, and since both animations manipulate the transform property, specifying a fill-mode for the period before the second animation executes would override whatever the first animation does with the transform property:

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

Cross my hamburger

• Author: Steven Roberts

This animation is used all over the web, turning three lines into a cross or close icon. Until fairly recently, the majority of implementations have been achieved using HTML elements, but actually SVG is much more suited to this kind of animation – there’s no longer a need to bloat your buttons code with multiple spans. 

Due to the animatable nature and SVG and its navigable DOM, the code to accomplish the animation or transition changes very little – the technique is the same. 

We start by creating four elements, be it spans inside of a div or paths inside of an SVG. If we’re using spans, we need to use CSS to position them inside the div; if we’re using SVG, this is already taken care of. We want to position lines 2 and 3 in the centre – one on top of another – while spacing lines 1 and 4 evenly above and below, making sure to centre the transform origin.

We’re going to rely on transitioning two properties: opacity and rotation. First of all, we want to fade out lines 1 and 4, which we can target using the :nth-child selector.

The only thing left to do is target the two middle lines and rotate them 45 degrees in opposite directions.

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 Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS 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

gap
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
row-gap

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

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. 

Flip book

When animating with CSS sometimes a dead simple approach is necessary. And there are few simpler animation methods than the flip book. Using steps () as our timing function, we are able to replicate this effect. While this might sound choppy and directly contradict our mission to maintain fluidity, with the right pacing it can feel just as seamlessly organic.

So how does it work? We define our animation easing function with just a few additional parameters – telling our animation how many steps are needed and at which point during the first step we’d like to begin (start, end) – looking a little like this, for example steps (10, start).

Within our keyframes, we can now designate an end point to our animation: for this example let’s assume our animation is 10 seconds long and we’re using 10 steps. In this case, each step will be one second long, immediately moving to the following one-second frame with no transition between.

Again, this seems to fly in the face of fluidity, but here’s where stepped animations can really shine. We can incrementally iterate through a sprite sheet and animate frame-by-frame just like a flip book. By defining frames of equal size but compiling them onto a single horizontal (or vertical) image, we can set this image as an element background and define a pixel or percentage background position as an end point to our animation, allowing a single step for each frame. The sprite sheet will then shift and populate the element frame by frame with a fresh background image based on its position.

Let’s take a look at an example. In this case some sets of animated legs appended to some text characters. First, we’ll define our animation name, duration, step count, start position and iteration count: 

Again, note that the duration is relatively speedy at less than one full second for 32 total frames. Next, we’ll define our keyframes: 

Note that the vertical positioning of the image is consistent throughout, which tells us that the sprites are horizontally stretched across the image, which is 1280px in total width. As we’ve defined 32 total frames for that image, we can deduce that each frame should be 40px wide. Check out this Codepen below.

It’s important to note that a large sprite sheet can potentially be a severe drag on performance, so be sure to size and compress images. With a well-crafted sprite sheet and an appropriate animation duration you now have a smooth animation able to convey complex motions.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Specify the fill-mode For an Animation

CSS animations do not affect an element before the first keyframe is played
or after the last keyframe is played. The animation-fill-mode property can
override this behavior.

The property specifies a
style for the target element when the animation is not playing (before it
starts, after it ends, or both).

The animation-fill-mode property can have the following values:

• — Default value. Animation will not
  apply any styles to the element before or after it is executing
• — The element will retain the
  style values that is set by the last keyframe (depends on animation-direction
  and animation-iteration-count)
• — 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
• — The animation will follow the rules
  for both forwards and backwards, extending the animation properties in both
  directions

The following example lets the <div> element retain the style values from the
last keyframe when the animation ends:

Example

div {  width: 100px;  height: 100px;  background: red;  position: relative;  animation-name: example;  animation-duration: 3s;
  animation-fill-mode: forwards;
}

The following example lets the <div> element get the style values set by the
first keyframe before the animation starts (during the animation-delay period):

Example

div {  width: 100px;  height: 100px; 
background: red;  position: relative; 
animation-name: example; 
animation-duration: 3s; 
animation-delay: 2s;  animation-fill-mode: backwards;
}

The following example lets the <div> element get the style values set
by the first keyframe before the animation starts, and retain the style values
from the last keyframe when the animation ends:

Example

div {  width: 100px;  height: 100px;  background: red;
  position: relative; 
animation-name: example; 
animation-duration: 3s; 
animation-delay: 2s;  animation-fill-mode: both;
}

The 6 steps of animation

We’ve talked about the workflow of the animation filmmaking pipeline, now lets go into the actual steps of character animation.

Here are the 6 steps of animation:

1. Shooting reference video
2. Key posing
3. Blocking
4. Splining
5. Smoothing
6. Adding life

Step 1: Shooting Reference video

This is a very important and overlooked step. It’s weird how people really think they know what certain actions look like, and how long they take, but end up getting it wrong.

Physical actions are something you need to analyze before animating, especially if you’re a beginner.

You have a shot of a guy throwing a baseball? Search YouTube for videos of pitchers throwing balls.

Don’t assume you know what an action looks like just because you’ve seen it before.

Looking at an action as an animator is completely different from looking at it as a viewer.

Step 2: Posing

After shooting a reference, it’s time to create the key poses of the shot.

These poses are called key poses because they are the most important poses of the shot. These are the poses that convey the story of the shot. We need to make sure we get those poses right, because we’re going to build on those for the rest of the process.

Step 3: Blocking

Once we’re happy with our key poses, we start breaking down the movement from each pose to the next by adding ‘in betweens’ (also known as breakdown poses or passing poses). These are the poses that connect the key poses.

We keep adding more poses until the movement looks as good as it could, while still staying in stepped mode (stepped mode is when you don’t allow interpolation between poses, which results in a very choppy/blocky motion).

Step 4: Splining

Splining is a 3D animation term. It’s the process in which you convert the interpolation of the keys from stepped to spline.

In other words – you make the computer connect the movement between each of your poses, and that makes the movement look smoother.

The problem is that the computer doesn’t do a very good job at interpolating. It only works with what it has. That’s why the better the blocking is – the better the splined version is going to look.

Step 5: Refining & offset

Now that all of our keys are in spline mode, we need to work on them. We refined the animation curves and make sure the movement looks smooth.

It’s also a good idea to offset some of the actions so it doesn’t look so ‘stop and start’, as if the character is doing all the motion at once.

By the end of this step your shot should look pretty solid and almost finished.

Step 6: Adding life

This step is the a lot of fun.

We’re already finished with the grunt work of animation, and it’s time to add small imperfections that bring life to the character.

CSS-переходы

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

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

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

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

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

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

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

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

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

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