What are they?
CSS Animations are a way of animating elements in CSS without any external libraries or the use of JS.
CSS Animations contain 2 parts:
- A style describing the animation
- A set of keyframes that state the start and end properties of the animation.
Defining Animations
Before we can actually use animations we need to define the animation, this is done with the keyframes at-rule in CSS.
Syntax using from/to:
@keyframes <ANIMATION NAME> {
from {
color: #000000;
}
to {
color: #ffffff;
}
}
Syntax using percentages:
@keyframes <ANIMATION NAME> {
0% {
color: #000000;
}
50% {
color: rgb(255, 0, 0);
}
100% {
color: #ffffff;
}
}
By using percentages we can add more points into the animation, compared to the from/to method where we can only define the start and stop points.
You can also mix and match from/to and percentages as well:
@keyframes <ANIMATION NAME> {
from {
color: #000000;
}
60% {
color: rgb(200, 0, 0);
}
to {
color: #ffffff;
}
}
Animation Properties
There are 8 animation properties that we can use to contorl and configure the animation.
Animation properties do not control the style of the animation! That happens with Keyframes
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
animation-name
Description: Specifies the name of the @keyframes animation that will be given to the element.
Example:
animation-name: ANIMATION_NAME;
animation-duration
Description: Allows for control of the length of the animation to complete one cycle. Time given in either Seconds(s) or Milliseconds(ms).
Example:
animation-duration: 1s;
animation-duration: 500ms;
animation-timing-function
Description: Controls how the animation progresses through the keyframes by establishing an accerelation curve.
Example:
animation-timing-function: linear;
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-delay
Description: Controls the delay between the element loading and the animation starting. Controlled in either Seconds(s) or Milliseconds(ms).
Example:
animation-delay: 1s;
animation-delay: 500ms;
animation-iteration-count
Description:
Controls how many times the animation will repeat for. If given as infinite then the animation will repeat forever.
Example:*
animation-iteration-count: 5;
animation-direction
Description: Controls the direction of the animation, starting at 0% to 100% (normal) or 100% to 0% (reverse). Or, if set to alternate will change on each completion of the animation.
Example:
animation-direction: normal;
animation-direction: alternate;
animation-fill-mode
Description: Controls the styles applying to the element after the animation has finished.
If set to forwards then the animation will persist the final animation styling after it finishes.
If set to backwards then the animation will revert back to the styling prior to the animation.
Example:
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-play-state
Description: Allows for playing and pausing of an animation.
Example:
animation-play-state: running;
animation-play-state: paused;
Animation Shorthand CSS
You can set the animation properies in one line using the CSS Shorthand animation.
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes name | duration | easing-function | delay */
animation: slidein 3s linear 1s;
/* @keyframes name | duration */
animation: slidein 3s;
Learn More about CSS Shorthand Properties.
Setting Multiple Animations
If we use the longhand CSS animation properties covered above, we can define multiple CSS animations in one go.
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
In this example, because there is 3 animations but only one duration and iteration-count properties they will all inherit these properties.
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
In this example, because there is enough properties for all of the animations they will inherit their respective placed property.
For example, the first defined animation fadeInOut will inherit the first defined properties: 2.5s and 2.
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
In this final case, as there isn't enough properties for all of the defined animations, CSS will loop through them.
For example, fadeInOut gets 2.5s and 2, moveLeft300px gets 5s and 1 and then it goes back to the start so bounce will get 2.5s and 2 again.
Read More / Sources
MDN Page on using CSS Animations CSS Tricks page on CSS Animations