CSS Animations :
Introduction:
CSS animations allow elements to transition from one style to another smoothly without using JavaScript. They enhance user experience by adding visual effects.
Types of CSS Animations
- Transitions – Simple animations triggered by user interaction.
- Keyframe Animations – Complex animations that define multiple states.
2. CSS Transitions
Transitions allow changes in CSS properties over a duration.
Syntax:
css
CopyEdit
selector {
transition: property duration timing-function delay;
}
Example: Hover Effect
css
CopyEdit
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s ease-in-out;
}
.box:hover {
background-color: red;
}
Transition Properties:
- transition-property – Specifies the CSS property to animate.
- transition-duration – Duration of the transition (e.g., 0.5s).
- transition-timing-function – Defines the animation speed curve (ease, linear, ease-in, ease-out, ease-in-out).
- transition-delay – Delay before the animation starts.
3. Keyframe Animations
Keyframe animations allow multiple styles changes at different points in time.
Syntax:
css
CopyEdit
@keyframes animation-name {
0% { /* Initial state */ }
50% { /* Midway state */ }
100% { /* Final state */ }
}
selector {
animation: animation-name duration timing-function delay iteration-count direction;
}
Example: Bouncing Box
css
CopyEdit
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
.box {
width: 100px;
height: 100px;
background-color: orange;
animation: bounce 1s ease-in-out infinite;
}
Animation Properties:
- animation-name – Name of the @keyframes.
- animation-duration – Duration of the animation.
- animation-timing-function – Defines the speed curve.
- animation-delay – Delay before the animation starts.
- animation-iteration-count – Number of times animation repeats (infinite for continuous loop).
- animation-direction – Defines the animation flow (normal, reverse, alternate, alternate-reverse).
4. Combining Multiple Animations
You can apply multiple animations by separating them with commas.
Example: Rotate & Fade Effect
css
CopyEdit
@keyframes rotateFade {
0% { opacity: 0; transform: rotate(0deg); }
100% { opacity: 1; transform: rotate(360deg); }
}
.box {
animation: rotateFade 2s ease-in-out forwards;
}
5. Practical Examples
1. Loading Spinner
css
CopyEdit
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
width: 50px;
height: 50px;
border: 5px solid lightgray;
border-top: 5px solid blue;
border-radius: 50%;
animation: spin 1s linear infinite;
}
2. Typing Effect
css
CopyEdit
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
.text {
width: 0;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid black;
animation: typing 3s steps(10, end) forwards;
}
6. Best Practices
✔ Keep animations short for a smooth experience.
✔ Avoid excessive animations that may slow down performance.
✔ Use will-change property for optimized rendering.
✔ Combine animations to create engaging UI effects.