The world of web development has been blown away by CSS animations. By providing movement, they give websites life and make them more visually dynamic and captivating. Keyframes are a fundamental component of CSS animations. We’ll cover all you need to know about CSS keyframes in this tutorial, from the fundamentals to more complex methods.
What Are CSS Keyframes?
To put it simply, keyframes specify the CSS animation’s intermediate stages. You can set an element’s style at different stages of the animation cycle by using keyframes. By establishing a sequence of “keyframes,” you can produce seamless changes between an element’s various states over a predetermined amount of time.
For intricate animations when you wish to manipulate an element’s look at precise times, as when it is moving, rotating, scaling, or changing color, keyframes are especially helpful.
keep in mind that, CSS Transform property also have scaling and rotating properties. You can find to learn too on this link.
Syntax of CSS Keyframes
The following is the basic syntax for a keyframe-based CSS animation:
@keyframes animationName {
0% {
/* Initial state of the animation */
transform: translateX(0);
opacity: 1;
}
50% {
/* Midway through the animation */
transform: translateX(50px);
opacity: 0.5;
}
100% {
/* Final state of the animation */
transform: translateX(100px);
opacity: 1;
}
}
Explanation:
-
@keyframes animationName: The@keyframesrule defines the name of the animation. The name can be anything you like, such asmove,fadeIn, orbounce. 0%,50%,100%: These percentages represent keyframes at different points in the animation.0%is the starting point,100%is the endpoint, and any percentage in between represents intermediate steps.
How to Use CSS Keyframes
After learning the fundamental syntax, let’s see how to add keyframes to an element.
Step 1: Define the Keyframes
Creating the keyframe animation is the first step, during which you specify what should occur at each stage:
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
Step 2: Apply the Keyframe Animation to an Element
The animation property will then be used to apply the motion to an element:
.element {
animation: slideIn 2s ease-in-out;
}
Explanation of the animation Property:
animation: This is the shorthand property that you use to apply an animation to an element.slideIn: The name of the animation that we defined earlier.2s: The duration of the animation. This means the animation will take 2 seconds to complete.ease-in-out: The timing function that controls the pace of the animation (how the animation starts and ends).ease-in-outmakes the animation start slowly, speed up in the middle, and slow down again at the end.
Example: Sliding In an Element
An element will slide in from the left in this tutorial:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Keyframes Example</title>
<style>
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.element {
width: 200px;
height: 100px;
background-color: #3498db;
animation: slideIn 2s ease-in-out;
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
Result:
In this tutorial, a blue box with a fade-in effect is created that will slide in from the left.
Keyframe Timing and Delays
Timing Functions
How an animation develops over time is managed by the timing function. Typical timing functions include:
ease: The default easing function; it starts slow, becomes faster in the middle, and slows down at the end.linear: The animation progresses at a constant speed.ease-in: The animation starts slow and accelerates towards the end.ease-out: The animation starts quickly and decelerates towards the end- .
ease-in-out: The animation starts slow, accelerates, and then slows down again.
These timing functions can be used in the animation property in the following ways:
animation: slideIn 2s ease-in-out;
Delays
The animation-delay property can also be used to introduce a delay before the animation begins:
.element {
animation: slideIn 2s ease-in-out;
animation-delay: 1s; /* Animation starts after 1 second */
}
As a result, the animation will begin one second after the element loads.
Advanced CSS Keyframe Animations
Animating Multiple Properties
Several properties can be animated in a single keyframe sequence. Here’s an example where an element’s background color and location both change:
@keyframes colorMove {
0% {
transform: translateX(0);
background-color: red;
}
100% {
transform: translateX(200px);
background-color: blue;
}
}
Using animation-timing-function
You can use the animation-timing-function for individual steps to adjust the time of each keyframe.
@keyframes moveAndScale {
0% {
transform: scale(1) translateX(0);
}
50% {
transform: scale(1.5) translateX(100px);
}
100% {
transform: scale(1) translateX(200px);
}
}
.element {
animation: moveAndScale 3s ease-in-out;
}
The element will scale and move in this example, then scale once again and travel further to the right.
Infinite Loops with animation-iteration-count
By setting the animation-iteration-count to infinite, you can create an animation loop that never ends.
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.element {
animation: bounce 1s ease-in-out infinite;
}
The element will repeatedly bounce up and down in this situation.
Best Practices for CSS Keyframes
Even though CSS keyframes are an excellent tool for animations, it’s crucial to use them wisely. The following are some recommended practices:
Keep Animations Subtle
Instead of detracting from the user experience, animations should improve it. Make sure that animations don’t overpower the information and use them sparingly.
Optimize for Performance
Particularly on mobile devices, animations might demand a lot of resources. Instead of animating properties like top, left, or width, try to animate hardware-accelerated properties like transform and opacity.
Test on Multiple Devices
Always test your animations to make sure they function properly on a variety of platforms because they may act differently on different devices and browsers.
Use Keyframes for Complex Animations
CSS keyframes are excellent for specifying intricate multi-stage animations. CSS transitions, on the other hand, can be more effective and simpler to use for basic animations.
conclusion
An effective tool for producing dynamic and captivating online animations is a CSS keyframe. You can easily build intricate and fluid effects by specifying the animation’s intermediate stages. Keyframes let you improve the user experience on your website with everything from basic animations like sliding in an element to more complex effects like multi-property animations and endless loops.
Gaining proficiency with keyframes brings up a world of opportunities for developing dynamic, aesthetically pleasing websites. Gaining a grasp of keyframes is crucial to becoming a skilled web developer, regardless of your level of experience with CSS animations.
To help your readers make the most of this potent CSS feature, this piece offers a thorough introduction to CSS keyframes along with explanations, code samples, and advanced suggestions. You can also learn CSS Transition and CSS transform properties.