CSS animation is feature of CSS3 which allow animating transitions from one CSS style to another with a use of animation properties applied to a certain html element and a keyframe, which defines the animation itself.
In the following paragraph I am going to describe the main principle of creating basic CSS animations by providing an example for each of the transition properties in action.
Although not every property can be animated so in the following links there is a list of properties that can be animated:
How to create basic css animations
In order to create an animation sequence the element that needs to be animated should be styled with animation property or its sub-properties. There are 8 animation properties which I am going to show in action (for all examples I followed a tutorial available at https://codeburst.io/a-guide-to-css-animation-part-1-8777f5beb1f8).
All the examples are accessible at http://obosa.uk/cm/css-animation/index.html
For each example I am going to animate a div element.
First of all, we need to create a keyframe rule to define our animation. Generally it takes this form:
Where animation name is the name of the animation to which we will refer when applying it to a html-element; keyframe selector can either be in percentages (e.g. 0%, 25%, 50%) or a keyword: to, from It selects the period of animation time. Inside the brackets of keyframe selector we specify the style that will apply to the element in selected period of animation running time.
Below there is an example of a keyframe that defines the 360deg spin of an element.
In order to apply this animation to an actual element we need to style it with animation sub-properties (or with an animation property shortcut). animation-name and animation-duration are mandatory properties.
The value defines the animation that should be applied to this element.
The value defines the animation running time. Could take any value in seconds (s) or milliseconds(ms), infinite, initial or inherit.
Above you can see the recreated result of defined animation of a spin.
In the spinning example I used to-from keywords as keyframe selector, but we can also use percentages as in the example below.
Here I change the position of a div by setting translate with values of x- and y-axis coordinates to a transform property. As in the previous example of a spin, I add animation-name: squarePath; and animation-duration:2s; to the div. You can see the result I tried to recreate with a GIF below.
The value defines the number of times we want the animation to repeat. Takes the numeral value or the keyword infinite.
The value defines the speed characteristics of the animation. It can take such values:
Is the default value for animation-timing-property. Starts and ends slowly, but rapids in the middle.
To see this property in action, please check out the live example at http://obosa.uk/cm/css-animation/index.html
Starts slowly, but increases the speed to the end.
Reduces the speed to the end.
Starts and ends slowly, rapids in the middle, but the transitions are more smooth then in ease.
The same speed through the running time.
Allows to define the speed manually. It takes four numeric values from 0 to 1 cubic-bezier(x1, y1, x2, y2). This values define the speed in four fragments of animation running. Although by setting negative values we can create a bounce effect.
Provides an option to split the animation into equal steps. It can either take one numeral value that sets the number of steps or an optional value for direction: start or end.
This property can take either paused value to stop the animation from running or running value which is the default value.
To show you this property in action I set the animation-play-state to running for a checkbox in :checked state which controls the animation of the spinning square that I showed earlier. So the animation will be paused by default and will start when the checkbox will be checked.
Defines the amount of time either in seconds(s) or milliseconds(ms) before the animation starts.
Specifies the behaviour of the element when the animation is not running (before, after or both). It can take four values:
The default value. The animation will not apply any style to the element before or after the executing.
The element will retain the style set in the last applied keyframe.
The element will retain the style set in the first keyframe.
The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions.
Allows to define the direction of the animation. It can take four values:
The animation direction alternates on each iteration.
The animation direction alternates on each iteration, starting with reverse.
Animation starts running in reverse.
As many CSS properties which have sub-properties, animation property has a shortcut.
is equivalent to this
CSS animation vs JS animation
The key advantages of CSS animation over scripts are:
However, CSS animation are still limited and here is a list of examples we can’t do in CSS yet:
Below you can see a table from https://caniuse.com/#feat=css-animation,css-transitions which shows browser support of CSS animation.
All popular browser support CSS animations except for their old versions and all versions of Opera Mini browser. Generally, 92.84% of browsers support CSS animation.