Notes on CSS Animations
1. What are CSS Animations?
CSS animations allow the creation of complex, multi-step animations for HTML elements by defining keyframes. They enable movement, transformation, and visual effects without requiring JavaScript.
2. Key Components of CSS Animations
CSS animations consist of two main parts:
Keyframes: Define the animation's behavior at various stages using percentages or keywords (from and to).
Animation Properties: Control how the animation behaves.
3. Keyframe Syntax
Keyframes define the intermediate steps of the animation.
Syntax:
css
@keyframes animation-name {
0% { /* Initial state */ }
50% { /* Midway state */ }
100% { /* Final state */ }
}
Example:
css
@keyframes slide-in {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
4. Animation Properties
· animation-name
Specifies the name of the keyframes to use.
Example: animation-name: slide-in;
· animation-duration
Defines how long the animation lasts.
Example: animation-duration: 2s;
· animation-timing-function
Specifies the speed curve of the animation.
Values:
ease (default): Slow start, fast middle, slow end.
linear: Constant speed throughout.
ease-in: Slow start.
ease-out: Slow end.
ease-in-out: Slow start and end.
cubic-bezier(n,n,n,n): Custom curve.
· animation-delay
Sets a delay before the animation starts.
Example: animation-delay: 1s;
· animation-iteration-count
Specifies how many times the animation repeats.
Values:
infinite: Repeats forever.
1, 2, etc.: Specifies a finite number of repetitions.
· animation-direction
Determines whether the animation alternates directions or repeats in the same direction.
Values:
normal: Default, plays forward.
reverse: Plays backward.
alternate: Alternates between forward and backward.
alternate-reverse: Alternates, starting backward.
· animation-fill-mode
Defines how the element is styled before and after the animation.
Values:
none: Default, no styles applied outside animation.
forwards: Retains the final keyframe's styles.
backwards: Applies the first keyframe's styles before animation starts.
both: Applies both forwards and backwards.
· animation-play-state
Specifies whether the animation is running or paused.
Values:
running: Default, animation runs normally.
paused: Pauses the animation.
5. Shorthand Property
All animation properties can be combined into a shorthand:
Syntax:
css
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Example:
css
animation: slide-in 2s ease-in-out 1s infinite alternate forwards;
6. Practical Examples
· Bounce Effect:
css
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-50px); }
}
.bouncing-box {
width: 100px;
height: 100px;
background-color: #ff5722;
animation: bounce 1s infinite;
}
· Fade-In Effect:
css
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-text {
font-size: 20px;
color: #333;
animation: fade-in 2s ease-in;
}
· Rotating Element:
css
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotating-icon {
width: 50px;
height: 50px;
animation: rotate 3s linear infinite;
}
7. Combining Animations
Multiple animations can be applied by separating them with commas:
css
animation: fade-in 2s ease, slide-in 1s linear;
8. Browser Compatibility
Most modern browsers support CSS animations. Use vendor prefixes for older browsers:
css
@-webkit-keyframes example { /* Safari and Chrome */ }
@-moz-keyframes example { /* Firefox */ }
@-o-keyframes example { /* Opera */ }
9. Performance Tips
Use GPU-friendly properties like transform and opacity to avoid reflow and repaint.
Avoid animating properties like width or height as they can degrade performance.
Combine CSS animations with will-change for smoother performance.
Example: will-change: transform;
10. Difference Between Animations and Transitions
CSS animations are a powerful tool for creating dynamic, visually appealing web interfaces. Mastering them opens up endless possibilities for enhancing user experiences!
Complete Example: Rotating and Bouncing Ball Animation
HTML
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="animation-container">
<div class="ball"></div>
</div>
</body>
</html>
CSS
css
/* General Styles */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(120deg, #89f7fe, #66a6ff);
font-family: Arial, sans-serif;
}
/* Animation Container */
.animation-container {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
border: 5px solid white;
border-radius: 50%;
background-color: #ffffff44;
}
/* Ball Styles */
.ball {
width: 50px;
height: 50px;
background-color: #ff5722;
border-radius: 50%;
position: absolute;
animation: bounce 2s ease-in-out infinite, spin 2s linear infinite;
}
/* Keyframes for Bounce */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(200px);
}
}
/* Keyframes for Spin */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Explanation
1. HTML Structure:
The .animation-container div acts as the boundary or container for the animation.
The .ball div represents the animated element.
2. CSS Animation:
bounce Keyframes: Moves the ball up and down in a bouncing motion using translateY.
spin Keyframes: Rotates the ball continuously using rotate.
3. Combination of Animations:
The animation property applies both the bounce and spin animations simultaneously.
4. Infinite Loop:
Both animations use infinite to repeat continuously.
Example: Sliding Text Animation
This example demonstrates a text element sliding in from the left and changing its color during the animation.
HTML
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sliding Text Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="text-container">
<h1 class="animated-text">Welcome to CSS Animations!</h1>
</div>
</body>
</html>
CSS
css
/* General Styles */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #8e44ad, #3498db);
font-family: Arial, sans-serif;
color: white;
overflow: hidden;
}
/* Text Container */
.text-container {
width: 100%;
text-align: center;
overflow: hidden;
}
/* Animated Text */
.animated-text {
font-size: 2.5rem;
font-weight: bold;
animation: slide-in 3s ease-in-out infinite alternate;
}
/* Keyframes for Slide-In */
@keyframes slide-in {
0% {
transform: translateX(-100%);
color: #ff5733;
}
50% {
transform: translateX(10%);
color: #f1c40f;
}
100% {
transform: translateX(0);
color: #2ecc71;
}
}
Explanation
1. HTML Structure:
The text-container div centers the text.
The animated-text h1 contains the sliding text.
2. CSS Animation:
The @keyframes slide-in defines the movement and color changes:
Starts from off-screen (translateX(-100%)) with orange text.
Moves to a slight overshoot with yellow text (translateX(10%)).
Ends in its final position (translateX(0)) with green text.
3. Infinite Animation:
The animation property uses infinite alternate to continuously slide the text back and forth.
Build a button that rotates 360 degrees when hovered over, using CSS animations.
Design a navigation bar where the menu items fade in and slide up sequentially when the page loads.
Create a pulsating effect for a circle element using the scale property in @keyframes.
Animate a text element so that it changes its color and scales up from 0 to its original size over 2 seconds.
Build a progress bar that fills up from 0% to 100% width using CSS animations and the width property.
Create an infinite animation where a square moves diagonally across the screen and then returns to its starting point.
Design a loading spinner animation where a div rotates continuously around its center point.
Animate an image so that it zooms in slightly on hover and then returns to its original size when the hover ends.
Create a flip card animation where a card rotates around its Y-axis to reveal a back face when hovered over.
Comments
Post a Comment
If you have any Doubts plz let me know