TL;DR — CSS animations refer to making elements transition from one style to another. They consist of properties indicating how animations work and keyframes.
Contents
- 1. Create CSS animations
- 2. More on keyframes
- 3. Multiple animations
- 4. Fade-in
- 5. Rotation animation
- 6. animation-delay
- 7. animation-iteration-count
- 8. animation-direction
- 9. animation-timing-function
- 10. animation-fill-mode
- 11. The animate shorthand
- 11.1. All properties for the shorthand
- 12. List of animatable properties
- 13. CSS Animation: Useful Tips
Create CSS animations
The CSS animation property is for making elements transition from one set of properties to another. To animate CSS properly, you have to specify keyframes that specify the beginning and end states for the animation.
Here is the syntax you can use for animating an element with CSS:
/* For modern browsers */
@-webkit-keyframes my-move {
from {background-color: green;}
to {background-color: lightblue;}
}
/* The standard way */
@keyframes my-move {
from {background-color: green;}
to {background-color: lightblue;}
}More on keyframes
When you define CSS styles in the @keyframes rule, the animation gradually changes to the new style. The keyframes define how the animations look at specific moments.
In this example, we bind an animation to <div>t. We set the animation to last for 6 seconds and change the background-color of <div> from blue to green:
/* Code for the animation */
@keyframes learn {
from {background-color: blue;}
to {background-color: green;}
}
/* The div element for the animation */
div {
width: 150px;
height: 150px;
background-color: blue;
animation-name: learn;
animation-duration: 6s;
border-radius: 90px;
}Remember: since the default animation duration value is 0 seconds, the animation will not effect if the animation-duration property is not defined.
You can also use percentage values to set gradual changes in the style. Therefore, you control the style of every step of the animation.
In the following example, the background color changes when 30% of the animation is complete. Then, it changes to another color when 60% is completed and reaches its final color when the animation ends (100%).
/* Code to animate */
@keyframes learn {
0% {background-color: blue;}
30% {background-color: red;}
60% {background-color: purple;}
100% {background-color: pink;}
}
/* The div element */
div {
width: 150px;
height: 150px;
background-color: blue;
animation-name: learn;
animation-duration: 6s;
border-radius: 90px;
}CSS animation examples show how you can use percentage values to gradually change other properties like position during the run of animation.
/* The code to animate */
@keyframes learn {
0% {background-color: blue; left: 1px; top: 1px;}
30% {background-color: green; left: 300px; top: 1px;}
60% {background-color: red; left: 300px; top: 300px;}
100% {background-color: purple; left: 1px; top: 1px;}
}
/* The div element */
div {
width: 150px;
height: 150px;
position: relative;
background-color: blue;
animation-name: learn;
animation-duration: 6s;
border-radius: 90px;
}Multiple animations
You can declare CSS multiple animations by separating each animation by commas.
.example {
height: 200px;
width: 200px;
background-color: salmon;
animation:
learn 6s ease infinite alternate,
nudge 5s linear infinite alternate;
}Fade-in
One of the CSS animation examples is setting a fade-in effect for elements.
You can create the CSS fade-in animation by using the @keyframes rule to specify opacity to go from 0 to 1.
/* Code for the animation */
@keyframes learn {
from {opacity: 0;}
to {opacity: 1;}
}
/* The div element for the animation */
div {
width: 150px;
height: 150px;
background-color: salmon;
animation-name: learn;
animation-duration: 6s;
border-radius: 90px;
}
Note: the opacity property value can be anything from 0.0 to 1.0. The lower the value, the more transparent the element.
Rotation animation
You can create the CSS rotate animation by manipulating the spin effect. The following example sets a CSS rotate animation for an image:
.image {
position: absolute;
-webkit-animation: spin 6s linear infinite;
-moz-animation: spin 6s linear infinite;
animation: spin 6s linear infinite;
}animation-delay
The CSS animation-delay property defines how much time passes until the animation starts. The default value is 0, meaning that animation starts as soon as the page loads.
In this example, we delay the CSS animation for four seconds:
div {
width: 150px;
height: 150px;
position: relative;
background-color: blue;
animation-name: learn;
animation-duration: 6s;
animation-delay: 4s;
border-radius: 90px;
}animation-iteration-count
The animation-iteration-count property defines how many times an animation runs.
In this example, the animation runs five times:
div {
width: 150px;
height: 150px;
position: relative;
background-color: blue;
animation-name: learn;
animation-duration: 6s;
animation-iteration-count: 5;
border-radius: 90px;
}For the CSS animation to never end, you can use the infinite value:
div {
width: 150px;
height: 150px;
position: relative;
background-color: blue;
animation-name: learn;
animation-duration: 6s;
animation-iteration-count: infinite;
border-radius: 90px;
}animation-direction
The CSS animation-direction property indicates whether an animation plays backward, forward, or alternates between the back and forth.
This example shows an animation running in the reverse direction (backward):
div {
width: 150px;
height: 150px;
position: relative;
background-color: blue;
animation-name: learn;
animation-duration: 6s;
animation-iteration-count: 5;
animation-direction: reverse;
border-radius: 90px;
}In this example, the animation runs forward, then backward:
div {
width: 150px;
height: 150px;
position: relative;
background-color: blue;
animation-name: learn;
animation-duration: 6s;
animation-iteration-count: 5;
animation-direction: alternate;
border-radius: 90px;
}The animation will start running backward, then run forward:
div {
width: 150px;
height: 150px;
position: relative;
background-color: blue;
animation-name: learn;
animation-duration: 6s;
animation-iteration-count: 5;
animation-direction: alternate-reverse;
border-radius: 90px;
}
animation-timing-function
The animation-timing-function property defines the speed curve of CSS animations.
The following example animates CSS with different speed curves:
#div1 {animation-timing-function: ease;}
#div2 {animation-timing-function: ease-out;}
#div3 {animation-timing-function: ease-in-out;}
#div4 {animation-timing-function: ease-in;}
#div5 {animation-timing-function: linear;}The list of possible values:
| Value | Description |
|---|---|
| ease | (Default) Animation starts slowly, then becomes fast, but ends slowly |
| linear | Animation speed is the same all the time |
| ease-in | Animation starts slowly |
| ease-out | Animation ends slowly |
| ease-in-out | Animation starts and ends slowly. The part in between is played in normal speed |
| cubic‑bezier(n,n,n,n) | You can specify your own chosen values |
animation-fill-mode
The CSS animation-fill-mode property sets the way the CSS animations affect the style of targets before and after the animation ends.
The following example shows how animation-fill-mode works with forwards value. Notice how the element keeps the style of the last keyframe of the animation after it finishes.
div {
width: 150px;
height: 150px;
background: lightblue;
position: relative;
animation-name: learn;
animation-duration: 2s;
animation-fill-mode: forwards;
}Here are the main property values:
| Value | Description |
|---|---|
| none | (Default) Animation does not affect the style of the element nor before nor after running the animation |
| forwards | The style values of the last animation keyframe are applied to the element |
| backwards | The style values of the first animation keyframe are applied to the element and kept during the animation-delay period |
| both | The animation follows the rules of both forwards and backwards animation fill modes |
The example below demonstrates how animation-fill-mode works with backwards value. You can see that the element has the style of the first keyframe before the animation even starts (during the delay).
div {
width: 150px;
height: 150px;
background: blue;
position: relative;
animation-name: learn;
animation-duration: 2s;
animation-delay: 1.5s;
animation-fill-mode: backwards;
border-radius: 90px;
}This example shows how animation-fill-mode works with both values of backwards and forwards.
div {
width: 150px;
height: 150px;
background: blue;
position: relative;
animation-name: learn;
animation-duration: 2s;
animation-delay: 1.5s;
animation-fill-mode: both;
border-radius: 90px;
}The element gets the style of the first keyframe before the animation is started. After the animation ends, the element keeps the style of the last keyframe.
The animate shorthand
The animation CSS shorthand declares all of the longhand properties in one declaration.
This example shows the use of six animation longhands:
div {
animation-name: learn;
animation-duration: 6s;
animation-timing-function: ease;
animation-delay: 3s;
animation-iteration-count: 5;
animation-direction: reverse;
border-radius: 90px;
}We can achieve the same effect by using a single animation property:
All properties for the shorthand
| Property | Description |
|---|---|
| animation-delay | Specifies the animation start with or without delay |
| animation-direction | Defines direction of the animation |
| animation-duration | Specifies how long one cycle lasts |
| animation-fill-mode | Defines the element style before and after running the animation |
| animation-iteration-count | Specifies how many times an animation runs |
| animation-name | Defines the @keyframes animation name |
| animation-play-state | Specifies the animation state – paused/running |
| animation-timing-function | Defines the animation speed curve |
List of animatable properties
These are the properties that are animatable using CSS:
| Property |
|---|
| background |
| background-position |
| background-size |
| background-color |
| border (and its related properties) |
| box-shadow |
| bottom |
| color |
| clip |
| column-gap |
| column-count |
| column-width |
| column-rule-width |
| column-rule-color |
| column-rule |
| columns |
| filter |
| flex |
| flex-grow |
| flex-shrink |
| flex-basis |
| font |
| font-size-adjust |
| font-size |
| font-weight |
| font-stretch |
| height |
| letter-spacing |
| line-height |
| left |
| margin |
| margin-left |
| margin-bottom |
| margin-top |
| margin-right |
| max-width |
| max-height |
| min-width |
| min-height |
| order |
| opacity |
| outline |
| outline-offset |
| outline-width |
| outline-color |
| padding |
| padding-top |
| padding-right |
| padding-left |
| padding-bottom |
| perspective |
| perspective-origin |
| right |
| text-shadow |
| text-decoration-color |
| text-indent |
| transform-origin |
| transform |
| top |
| visibility |
| vertical-align |
| word-spacing |
| width |
| z-index |
CSS Animation: Useful Tips
- You need to animate CSS with caution as flashing colors, and specific kinds of motion could cause problems for people with disorders, migraine or epilepsy.
- To make sure that CSS animations work on all browsers, you can include prefixes, such as
-webkit-animationand-moz-animation.