Do you think IIT Guwahati certified course can help you in your career?
Introduction
Keyframes in CSS allow you to create animations by specifying the starting and ending points of an element's style and any intermediate points in between. This is a powerful feature used to create smooth transitions for web elements.
In this article, we will discuss what keyframes in CSS are, how they work, their syntax, and examples to show how one can use them to make the websites more interactive and engaging.
What are Keyframes in CSS?
CSS Keyframes are a rule used to control the intermediate steps of an animation. With keyframes, you can break down an animation into smaller steps, defining how the properties of an element should change from one point to another over time. This makes it possible to define smooth and detailed animations.
For example, if you want to move an element from one side of the screen to the other, keyframes allow you to specify its position at different times, ensuring a smooth transition. Without keyframes, the animation would be less flexible and more difficult to control.
Syntax of CSS Keyframes
The syntax for CSS keyframes is quite easy to understand. You use the @keyframes rule followed by the animation name and a set of keyframe selectors that define the animation stages.
animation-name is the name of the animation, which you will later reference in the CSS properties of the element you wish to animate.
0% is the starting point of the animation.
50% is a midpoint (optional), allowing for intermediate steps in the animation.
100% is the endpoint of the animation.
Property Values
When working with CSS keyframes, there are several important properties that control the animation:
Property
Description
Examples
animation-name
Specifies the name of the @keyframes to apply to the element.
N/A
animation-duration
Defines how long the animation takes to complete.
2s (2 seconds)
animation-timing-function
Specifies the speed curve of the animation.
ease, linear, ease-in-out
animation-delay
Defines the delay before the animation starts.
1s, 500ms
animation-iteration-count
Specifies how many times the animation runs.
infinite, 1, 3
animation-direction
Defines whether the animation plays in reverse or alternates after each cycle.
reverse, alternate
Keyframes timing function
Here are the key timing functions available for CSS @keyframes animations:
ease
Default timing function
Starts slow, speeds up in the middle, slows down at the end
Creates smooth, natural-looking animations
linear
Maintains constant speed throughout the animation
Good for continuous motions like rotations or color changes
No acceleration or deceleration
ease-in
Starts slow and accelerates towards the end
Creates a "delayed start" effect
Good for elements leaving the screen
ease-out
Starts fast and decelerates towards the end
Creates a "soft landing" effect
Useful for elements entering the screen
ease-in-out
Combines ease-in and ease-out
Slow start, fast middle, slow end
Great for smooth back-and-forth animations
steps(n)
Creates frame-by-frame animations
Divides animation into equal discrete steps
Useful for sprite animations or flip-book effects
cubic-bezier(x1, y1, x2, y2)
Allows custom timing function
Provides precise control over animation speed
Values range from 0 to 1
Can create bouncing or elastic effects
step-start
Equivalent to steps(1, start)
Jumps immediately to the end state
No intermediate steps
step-end
Equivalent to steps(1, end)
Stays at start until the very end
Then jumps to final state
Examples of CSS Keyframes
Let’s have a look at some examples to understand how keyframes work.
Example 1: Simple Animation Using @keyframes
HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Define the keyframes */
@keyframes slide {
0% { left: 0; }
100% { left: 200px; }
}
/* Apply the animation to the box */
.box {
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation-name: slide;
animation-duration: 3s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output
Explanation:
The animation slide moves the box element from 0px to 200px from the left.
The animation-duration property is set to 3 seconds, so the animation takes 3 seconds to complete.
The animation-iteration-count is set to infinite, which means the animation will keep repeating.
Example 2: Animation with Multiple Keyframes
HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@keyframes bounce {
0% { top: 0; }
50% { top: 100px; }
100% { top: 0; }
}
.ball {
position: relative;
width: 50px;
height: 50px;
background-color: blue;
border-radius: 50%;
animation-name: bounce;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
Output
Explanation:
Here, the animation bounce moves the element up and down by changing the top property.
It starts at the top (0px), moves down to 100px at 50%, and returns to the top at 100%.
The ease-in-out timing function creates a smooth acceleration and deceleration effect.
Supported Browsers
CSS Keyframes are widely supported across all modern browsers. Here’s a list of major browsers that support CSS keyframes:
Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Opera
For older versions of browsers, especially Internet Explorer, it’s recommended to use vendor prefixes like -webkit-, -moz-, and -o- to ensure full compatibility. Below is an example of how to add these prefixes:
Here are the key points to remember about CSS @keyframes:
Declaration Syntax The @keyframes rule must include a name and be followed by the animation stages defined using percentages (0% to 100%) or keywords 'from' and 'to'.
Property Inheritance Properties not specified in intermediate keyframes will be interpolated automatically. Any properties you don't animate will maintain their original values.
Multiple Animations Multiple @keyframes animations can be applied to the same element using comma separation in the animation property, allowing complex combined animations.
Browser Support While @keyframes are widely supported, always include vendor prefixes (-webkit-, -moz-, -o-) for maximum browser compatibility when necessary.
Performance Considerations Animate transform and opacity properties for better performance. These properties are GPU-accelerated and don't trigger browser repaints, unlike properties like width or height.
Reusability Keyframe animations can be reused across multiple elements and can be customized using animation properties like duration, timing function, and iteration count.
Frequently Asked Questions
Can I use CSS keyframes for all types of properties?
Yes, you can use CSS keyframes to animate most properties, including position, color, opacity, and more. However, some properties may not produce a smooth animation, so it’s always good to test your animations.
How do keyframes differ from transitions?
Keyframes define detailed animations with multiple stages and allow more complex motion, while transitions handle simple state changes between two values triggered by events like hover or click. Keyframes provide greater control over animation sequences.
What are common performance issues with keyframes?
Keyframes can cause performance issues if animating non-transform properties (e.g., width or top), as they trigger layout recalculations. Using high frame rates or heavy animations without GPU acceleration may lead to lag and reduced responsiveness.
What is the purpose of the animation-timing-function property?
The animation-timing-function property controls the speed curve of the animation, meaning how the speed of the element changes throughout the animation. For example, linear keeps the speed constant, while ease starts slow, speeds up, and then slows down at the end.
What happens if I don’t define a 0% or 100% in my keyframes?
If you don’t define a 0% or 100% in your keyframes, the animation will start and end with the element’s original styles unless those styles are overridden elsewhere in the animation. The animation will interpolate between the keyframes that are provided, but the initial and final states will remain unchanged.
Conclusion
In this article, we discussed about keyframes in CSS which is a crucial tool for adding animations to web pages. We covered the syntax of keyframes, properties like animation-duration and animation-iteration-count, and provided examples of how to implement animations. With this knowledge, you can enhance your web pages with dynamic and interactive animations.
518+ registered 
