Detailed Animations: Creating CSS Animations with @keyframes
Define the blueprint for your CSS animations, from simple fades to complex, multi-step sequences using the powerful @keyframes at-rule.
Welcome! Let's learn how to define our very own animations using the CSS @keyframes rule.
/* Ready to build an animation? */What are @keyframes?
The @keyframes at-rule is the heart of CSS animations. It allows you to define the stages and styles of an animation sequence, giving you complete control over an element's transition over time. You give your animation a name, and then define its behavior.
Simple Keyframes: 'from' and 'to'
For simple, two-stage animations, you can use the keywords from (the starting point, equivalent to 0%) and to (the ending point, equivalent to 100%). This is perfect for effects like fading in or sliding into view.
Multi-Step Animations with Percentages
To create more complex, multi-step animations, you use percentages. You can define styles at any point in the animation's timeline, from 0% to 100%. For example, you can make an element pulse by scaling it up at 50% and back down at 100%.
Applying Your Animation
Once you've defined a @keyframes rule, you apply it to an element using the animation-name property. You then use other animation properties (like animation-duration) to control how it runs. For example: animation: my-animation 2s;.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
{ from { : 0; } to { : 1; } }
Practice Example: Code Editor
Create a @keyframes animation named `color-and-scale` that changes an element's background color to `#ef4444` (red-500) and scales it to 1.5 times its size at the 100% mark.
Basic CSS Animations
| Animation | Description |
|---|---|
| @keyframes spin | Defines an animation that rotates an element. |
| @keyframes move | Defines an animation that moves an element from left to right. |
| @keyframes scale | Defines an animation that increases and decreases the size of an element. |
* Write your CSS code with animation and apply it to see the results.
Results:
Advanced @keyframes Techniques
Once you've mastered the basics, @keyframes can be used to create sophisticated and efficient animations. Let's explore some more advanced, real-world techniques.
1. Animating Multiple Properties at Once
You are not limited to animating a single property. You can change colors, positions, opacity, and transforms all within the same keyframe rule to create rich, layered effects.
@keyframes move-and-fade {
0% { transform: translateX(0); background-color: #3b82f6; }
50% { background-color: #8b5cf6; }
100% { transform: translateX(100px); background-color: #ec4899; }
}2. Grouping Keyframe Selectors
To make your code more concise (DRY - Don't Repeat Yourself), you can group keyframe selectors that share the same styles by separating them with a comma. This is common for the start and end states.
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}3. Practical Example: A Loading Spinner
A perfect use case for a simple keyframe animation is a loading spinner. By animating the `transform: rotate()` property, we can create a smooth, infinitely looping animation with very little code.
.loader {
border: 4px solid #f3f4f6;
border-top: 4px solid #3b82f6;
border-radius: 50%;
width: 40px; height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}Practical Takeaway: @keyframes is your canvas. Think of percentages as points in time, allowing you to choreograph complex sequences that enhance user interaction and bring your designs to life.