CSS Animation

All modern browsers except IE9 support CSS animations that allow you to implement CSS animation.

Css-animation consists of two parts: a set of keyframes- @keyframes and parameters of the animation itself — animation … . The animation describes how the style of the block will change from the initial to the final point.

The list of animated properties is given on this page

The @keyframes rule

Creation of animation begins with installation of key frames of rules @keyframes. Frames determine which properties at which step will be animated. Each frame can include one or more ad units from one or more pairs of properties and values. The @keyframes rule contains the name of the element animation that links the rule and the element declaration block.

Keywords frames are created using keywords from and to (equivalent to the values ​​0% and 100%) or by using percentage points, which can be set as many as desired.

It is not recommended to animate non-numeric values ​​(with rare exceptions), since the result in the browser can be unpredictable. Also, do not create the main frames, for example, for the value of the properties color:, width: .

Some Animation properties:

***Animation name

***Animation-duration — time in seconds (s) or milliseconds (ms)

***Animation-timing-function — this property specifies the type of animation. Possible values ​​are:

  • ease — slip (default value)
  • linear — smooth motion
  • easy-in— acceleration towards the end
  • ease-out— acceleration at the beginning
  • easy-in-out — smoother slide than ease
  • step-start and step-end— Set step-by-step Animation, steps (number)

***Animation-iteration-count — controls the repetition of the animation. Default value: 1 (animation is played once), infinite — infinite repetition

***Animation-direction — Responsible for the direction of the animation.
Possible values ​​are:

  • Normal — the animation plays in the usual direction, from the beginning to the end.
  • Reverse — the animation is played in the opposite direction, that is, from the end.
  • Alternate — the animation is played from the beginning to the end, and then in the opposite direction.
  • Alternate-reverse— the animation is played from the end to the beginning, and then in the opposite direction.

***Animation-game-state — controls the stop and playback of the animation.
Possible values:

  • running — animation is played (default value)
  • paused — the animation freezes in the first step.

***Animation-delay — you can set the animation delay before the beginning of the scene. Time in seconds (s) or milliseconds (ms)

***Animation-filling-mode — the property determines whether the animation affects the element outside the time it takes for the animation to pass.
Possible values ​​are:

  • None — the animation affects an element only during the action, after the element is returned to its original state
  • Forwards — the animation affects the element upon completion
  • Back — the animation affects the element before the action begins
  • Both — the animation affects the element before and after the end of the scene.

Show your support

Clapping shows how much you appreciated Alla Gorik’s story.