![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS @keyframes Rule
![CSS @keyframes Rule](https://codetofun.com/wp-content/themes/codetofun/images/large/css-keyframes-rule.webp)
Photo Credit to CodeToFun
🙋 Introduction
The @keyframes
rule in CSS is used to define animations. It allows you to create complex animations by specifying a series of keyframes. Keyframes define the states of the animation at specific points in time.
Using @keyframes
, you can animate CSS properties to create smooth transitions and engaging visual effects on your website.
💡 Syntax
The syntax for the @keyframes
rule is as follows:
@keyframes animation-name {
from {
/* Initial state */
}
to {
/* Final state */
}
}
Alternatively, you can use percentage values to define intermediate states:
@keyframes animation-name {
0% {
/* Initial state */
}
50% {
/* Intermediate state */
}
100% {
/* Final state */
}
}
🎛️ Default Value
The @keyframes
rule does not have a default value because it is used to define custom animations. The behavior of the animation is determined by the keyframes you specify.
🏠 Property Values
Value | Description |
---|---|
animation-name | The name of the animation defined by @keyframes . |
from | The starting point of the animation. |
to | The ending point of the animation. |
percentage | Specific points in the animation timeline (e.g., 0%, 50%, 100%). |
📄 Example
Basic Animation
In this example, we create a simple animation that changes the background color of a <div> element from blue to red.
<!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 colorChange {
from {
background-color: blue;
}
to {
background-color: red;
}
}
.animated-box {
width: 100px;
height: 100px;
animation: colorChange 3s infinite;
}
</style>
</head>
<body>
<h1>Animation with @keyframes</h1>
<div class="animated-box"></div>
</body>
</html>
Advanced Animation
In this example, we create a more complex animation that moves an element in a square path.
<!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 moveSquare {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(100px) translateY(0);
}
50% {
transform: translateX(100px) translateY(100px);
}
75% {
transform: translateX(0) translateY(100px);
}
100% {
transform: translateX(0) translateY(0);
}
}
.moving-box {
width: 100px;
height: 100px;
background-color: green;
animation: moveSquare 4s infinite;
}
</style>
</head>
<body>
<h1>Square Path Animation with @keyframes</h1>
<div class="moving-box"></div>
</body>
</html>
🖥️ Browser Compatibility
The @keyframes
rule is well-supported across modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. To ensure the best experience for your users, it's always a good practice to test animations across different browsers.
🎉 Conclusion
The @keyframes
rule is a powerful feature in CSS that allows you to create complex animations by defining keyframes.
By specifying the states of an animation at various points in time, you can create smooth transitions and dynamic visual effects that enhance the user experience. Experiment with different keyframes and animation properties to see how you can bring your website to life.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee