CSS Animations
CSS animations allow you to animate the changes of CSS properties over time, making elements move, change color, grow, shrink, or perform other visual effects. Unlike transitions, which are triggered by user actions like hovering or clicking, animations can run automatically when the page loads or at any time specified by the developer.
How Does CSS Animation Work?
To create a CSS animation, you need to define two things:
1. Keyframes: These define the start and end points (and any intermediate points) of the animation.
2. Animation Properties: These control how the animation is applied to an element, such as its duration, timing, and repetition.
Basic Syntax
@keyframes animation-name {
/* Define the animation states */
}
selector {
animation: animation-name duration timing-function delay iteration-count direction;
}
• animation-name: The name of the animation, linked to the @keyframes rule.
• duration: How long the animation takes to complete one cycle (e.g., 2s for 2 seconds).
• timing-function: The speed curve of the animation (e.g., ease, linear).
• delay: The time to wait before the animation starts (optional).
• iteration-count: How many times the animation should repeat (e.g., infinite for endless repetition).
• direction: Specifies whether the animation should alternate direction or restart from the beginning.
Example: Basic Animation
Let’s animate a box so that it moves from left to right across the screen.
Output:
In this example:
• Animation (animation Property): The animation property in the .box class specifies the moveRight animation with a duration of 3 seconds and an infinite repeat. This makes the box move from left to right repeatedly.
• Keyframes (@keyframes): The @keyframes rule defines how the animation progresses over time. In this case, the box moves horizontally from its starting position (left: 0) to the end position (left: 100%).
• Positioning: The position: absolute; property allows the box to be positioned independently of other elements. The top and left properties control its initial placement.
Animating Multiple Properties
You can animate multiple properties simultaneously by defining them within the @keyframes.
Example:
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
position: absolute;
top: 50px;
left: 0;
animation: animateBox 4s infinite;
}
@keyframes animateBox {
0% {
left: 0;
background-color: #4CAF50;
transform: rotate(0deg);
}
50% {
left: 50%;
background-color: #ff5733;
transform: rotate(180deg);
}
100% {
left: 100%;
background-color: #4CAF50;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class=”box”></div>
</body>
Output:
In this example:
• Animation Timing: The box animates over 4 seconds, moving horizontally from the left to the right edge of the containing element, changing color from green to orange, and rotating from 0 to 360 degrees.
• Animation Properties: animation: animateBox 4s infinite;: Applies the keyframes defined in animateBox and makes the animation loop indefinitely.
• Transformations:
– transform: rotate(): Applies rotation to the box.
– left: Moves the box horizontally.
Timing Functions and Delays
You can control the speed and delay of your animations using timing functions and delays.
Example:
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
position: absolute;
top: 50px;
left: 0;
animation: moveRight 5s ease-in-out 2s infinite;
}
@keyframes moveRight {
0% {
left: 0;
}
100% {
left: 100%;
}
}
</style>
</head>
<body>
<div class=”box”></div>
</body>
Output:
In this example:
Animation Timing:
• 5s: The box takes 5 seconds to move from the left edge to the right edge.
• ease-in-out: The movement starts slowly, speeds up, and then slows down towards the end.
• 2s: The animation starts 2 seconds after the page loads.
Animation Properties:
• animation: moveRight 5s ease-in-out 2s infinite;: Defines the animation, including its duration, timing function, delay, and repetition.
Animation Fill Modes
Animation-fill-mode determines the styles applied to the element before and after the animation runs.
• none: Default. The animation does not affect the element’s styles before or after it runs.
• forwards: The element will retain the styles from the last keyframe.
• backwards: The element will apply the styles from the first keyframe before the animation starts.
• both: Combines forwards and backwards.
Example:
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
position: absolute;
top: 50px;
left: 0;
animation: moveRight 4s infinite;
animation-fill-mode: both; /* Maintains the style before and after animation */
}
@keyframes moveRight {
0% {
left: 0;
}
100% {
left: 100%;
}
}
</style>
</head>
<body>
<div class=”box”></div>
</body>
Output:
In this example:
Animation Behavior:
• The .box element moves horizontally from the left to the right of its containing element over 4 seconds.
• The animation-fill-mode: both; property ensures that the box maintains the position specified in the 100% keyframe (the final state) even after the animation ends.
Browser Support
Most modern browsers support CSS animations, but for older browsers, consider adding vendor prefixes:
@-webkit-keyframes moveRight { /* Safari and Chrome */ }
@-moz-keyframes moveRight { /* Firefox */ }
@-o-keyframes moveRight { /* Opera */ }
@keyframes moveRight { /* Standard */ }
Conclusion
CSS animations bring your web pages to life by enabling elements to move, change, and interact in dynamic ways. Whether you’re creating simple hover effects or complex sequences, CSS animations are a powerful tool for enhancing user experience. They allow for smooth, engaging interactions without the need for JavaScript, making them a must-have skill for modern web development.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Simple Fade In Animation
Objective: Create an element that fades in when the page loads.
Expected Output: An element that gradually becomes visible over 2 seconds.
Code:
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
opacity: 0;
animation: fadeIn 2s ease-in forwards;
}
</style>
Output:
Scenario 2: Bounce Animation
Objective: Create an element that bounces up and down.
Expected Output: An element that performs a bouncing animation.
CSS Code:
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.bounce {
display: inline-block;
animation: bounce 2s infinite;
}
</style>
Output:
Scenario 3: Rotate and Scale Animation
Objective: Create an element that rotates and scales up.
Expected Output: An element that rotates 360 degrees and scales to 1.5 times its size over 3 seconds.
Output:
Scenario 4: Slide In from Left
Objective: Create an element that slides in from the left.
Expected Output: An element that moves from off-screen on the left to its position over 2 seconds.
Output:
Scenario 5: Pulsing Effect
Objective: Create an element with a pulsing animation effect.
Expected Output: An element that pulses by scaling up and down.
Output:
Scenario 7: Typing Animation
Objective: Create a text element that simulates typing effect.
Expected Output: Text that appears as if it is being typed out.
CSS Code:
<style>
.typing {
font-family: monospace;
border-right: 2px solid black;
white-space: nowrap;
overflow: hidden;
animation: typing 4s steps(40, end) infinite, blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: black; }
}
</style>
Output:
