CSS animations are like magic tricks that make websites more dynamic and engaging. By using animations, you can easily move your website elements, change their colors, and smoothly adjust their size.
To make your animations more interactive and smooth, you first need to understand the basic animation concepts. In this post, you’ll learn about the basic rule syntax of animations and animation properties to control the behavior of animation.
Let’s jump right into it!🚀
To get started with CSS animations, you need to understand two essential components:
- @ keyframes: The blueprint for animations.
- Animation properties: The settings that control animations.
@ keyframes
@ keyframes are type of a roadmap for animation, in which, you define the start and end points of the animation and the steps between the animation.
That means, this part defines how the animation should start, how it should behave in between, and how the animation should end.
Syntax:
@keyframes animationName {
from {
/* Starting style */
}
to {
/* Ending style */
}
}
For example:
@keyframes fadeIn {
from {
opacity: 0; /* Invisible */
}
to {
opacity: 1; /* Visible */
}
}
In this example, the opacity of the element will start from 0 and will go to 1.
Before we move on, check out this eBook that will make you a pro in CSS Animations:
📚 CSS Animation Essentials: Best Practices, Techniques, and Performance Tips
From simple fades to complex animations, this eBook covers everything you need to master CSS animations, including:
- Timing functions
- Keyframes & animation flow
- Performance optimization
- Real-world applications
Ideal for developers looking to create smooth CSS animations. Grab your copy now!
Animation Properties
To customize, CSS animations different properties are used and each property has its own role which defines the behavior of the animation.
Animation properties are applied directly to an element, which defines the name, duration, delay, direction etc. of the animation.
Syntax:
.element {
animation-name: fadeIn; /* name of the animation or @keyframes */
animation-duration: 2s; /* duration of the animation */
}
For example:
.box {
height: 100px;
width: 100px;
background-color: rgb(44, 117, 117);
animation-name: fadeIn; /* Name of the animation */
animation-duration: 2s; /* Animation duration */
}
@keyframes fadeIn {
from {
opacity: 0; /* Invisible */
}
to {
opacity: 1; /* Visible */
}
}
In this example, the element with the class name “box” will be invisible in the starting and after two seconds it will be visible, giving a smooth fade in effect.
In CSS, you have the following animation properties:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state
Now, let’s learn about each property.
animation-name
What it does?
This property is used to define which @ keyframes animation should be applied.
For example, if you have two @ keyframes named fadeIn or fadeOut then by using the animation-name property you can define on which element the fadeIn animation should applied and on which element the fadeOut animation should applied.
Syntax:
animation-name: animationName;
For example:
animation-name: fadeIn;
The animation-name property is required to run the animation.
animation-duration
What it does?
This property defines the duration of the animation which means how long an animation takes to run.
You can define the animation duration in seconds (s) or milliseconds (ms).
Syntax:
animation-duration: time;
For example:
animation-duration: 4s; /* Animation will run for 4 seconds */
If you don’t define the animation-duration then it automatically sets to 0s (default value), which makes the animation effectively disable.
animation-timing-function
What it does?
This property is used to define the speed pattern of the animation. That means, by using this property you can define whether the animation will start slow, at constant speed or at a fast speed.
It has the following values:
- linear: Animation will run at a constant speed.
- ease: Slow start, fast middle, and slow end.
- ease-in: Slow start.
- ease-out: Slow end.
- ease-in-out: Slow start and slow end.
- cubic-bezier(x1, y1, x2, y2): Custom speed pattern.
Example:
animation-timing-function: ease-in-out;
animation-delay
What it does?
This property defines how much the animation will wait before starting, which means the delay for the animation.
Syntax:
animation-delay: time;
Example:
animation-delay: 2s; /* Animation will start after 2 seconds */
animation-iteration-count
What it does?
This property is used to define the repeating number for the animation, which means how many times the animation will repeat.
It has the following values:
- 1: Animation will run only one time (This is the default value).
- infinite: Animation will keep repeating.
- Any number: Animation will run how many times you define.
Example:
animation-iteration-count: infinite; /* Infinite loop */
animation-direction
What it does?
This property defines the direction of the animation.
It has the following values:
- normal: Animation will run in the forward direction (This is the default value).
- reverse: Animation will run in reverse direction.
- alternate: Animation will run alternatively, one time forward and one time reverse.
- alternate-reverse: Animation will run reverse first and then forward. ** Example:**
animation-direction: alternate;
animation-fill-mode
What it does?
This property is used to define the style of the element before starting the animation and after ending the animation. It defines what styles should be applied to the element when the animation is not playing.
It allows you to control how the element appears before and after an animation, giving you more flexibility in how you manage element states during animations.
It has the following values:
- none: No styles will be applied before or after the animation.
- forwards: Retains the end style of the animation.
- backwards: This applies the starting styles of the animation, in the delay time as well.
- both: Handles the styles for both start and end.
Example:
animation-fill-mode: forwards;
animation-play-state
What it does?
This property specifies the state of the animation: running or paused.
It has the following values:
- running: Animation will continue.
- paused: Animation will stop, but will retain the state.
Example:
animation-play-state: paused;
This property is used for interactive animation, for example, pausing the animation on hover.
Animation Shorthand Syntax
The animation shorthand allows you to define multiple animation properties in a single line. Instead of writing each animation property one by one, you can combine them into a single line for better readability.
Syntax:
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode];
Example:
.element {
animation: slide 3s ease-in-out 1s infinite alternate forwards;
}
Here,
-
slide: The name of the animation. -
3s: The animation duration is 3 seconds. -
ease-in-out: The timing function is ease-in-out, meaning the animation will start slow, speed up, and then slow down again. -
1s: The animation will start after a 1-second delay. -
infinite: The animation will repeat indefinitely. -
alternate: The animation will alternate between moving forward and backward on each iteration. -
forwards: The styles applied in the last keyframe (at 100%) will be retained after the animation completes.
Animations Cheat Sheet
I’ve created a comprehensive CSS Animation Cheat Sheet that covers all the key concepts, properties, and syntax used in CSS animations.
You can download the cheat sheet on GitHub by clicking the link below:
https://github.com/WebdevShefali/CheatSheets
That’s all for today.
I hope it was helpful.
Thanks for reading.
If you find my articles helpful and would like to support my work, consider buying me a coffee ☕.
For more content like this, click here.
Follow me on X(Twitter) for daily web development tips.
Keep Coding!!
Top comments (0)