CSS animations bring websites to life. Let's master transitions, keyframes, and performance optimization.
Transitions
Basic Transition
css
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}Multiple Properties
css
.element {
transition:
background-color 0.3s ease,
transform 0.3s ease,
opacity 0.3s ease;
}Timing Functions
css
/* Linear */
transition: all 0.3s linear;
/* Ease (default) */
transition: all 0.3s ease;
/* Ease-in */
transition: all 0.3s ease-in;
/* Ease-out */
transition: all 0.3s ease-out;
/* Ease-in-out */
transition: all 0.3s ease-in-out;
/* Custom cubic-bezier */
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);Keyframe Animations
Basic Animation
css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.element {
animation: fadeIn 0.5s ease-in;
}Multiple Keyframes
css
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
transform: translateX(10%);
}
100% {
transform: translateX(0);
opacity: 1;
}
}Animation Properties
css
.element {
/* Name */
animation-name: slideIn;
/* Duration */
animation-duration: 0.5s;
/* Timing function */
animation-timing-function: ease-in-out;
/* Delay */
animation-delay: 0.2s;
/* Iteration count */
animation-iteration-count: 3;
animation-iteration-count: infinite;
/* Direction */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
/* Fill mode */
animation-fill-mode: forwards;
animation-fill-mode: backwards;
/* Play state */
animation-play-state: running;
animation-play-state: paused;
}
/* Shorthand */
.element {
animation: slideIn 0.5s ease-in-out 0.2s forwards;
}Common Animations
Fade In/Out
css
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}Slide Animations
css
@keyframes slideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}Scale Animations
css
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}Rotate Animations
css
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}Loading Spinner
css
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}Transforms
2D Transforms
css
/* Translate */
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
/* Scale */
transform: scaleX(2);
transform: scaleY(2);
transform: scale(2);
transform: scale(2, 0.5);
/* Rotate */
transform: rotate(45deg);
/* Skew */
transform: skewX(20deg);
transform: skewY(20deg);
transform: skew(20deg, 10deg);
/* Multiple transforms */
transform: translateX(100px) rotate(45deg) scale(2);3D Transforms
css
/* 3D context */
.parent {
perspective: 1000px;
}
/* 3D transforms */
.element {
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: translateZ(100px);
transform: scaleZ(2);
}
/* Combined 3D */
.card {
transform-style: preserve-3d;
transform: rotateY(180deg);
}Performance Optimization
GPU Acceleration
css
/* Promote to GPU */
.element {
will-change: transform;
will-change: opacity;
}
/* Or use */
.element {
transform: translateZ(0);
}Animate Efficient Properties
css
/* ✅ GOOD: GPU accelerated */
transform: translateX(100px);
opacity: 0.5;
/* ❌ BAD: Triggers layout */
width: 100px;
height: 100px;
left: 100px;
top: 100px;Reduce Layout Thrashing
css
/* Use transforms instead of position changes */
.element {
/* Good */
transform: translateX(100px);
/* Bad - triggers layout */
left: 100px;
}Animation Examples
Button Hover Effect
css
.button {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
transition: all 0.3s ease;
}
.button:hover {
background-color: darkblue;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.button:active {
transform: translateY(0);
}Card Hover Effect
css
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}Menu Slide-in
css
.menu {
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background-color: #333;
transition: left 0.3s ease;
}
.menu.open {
left: 0;
}Modal Fade-in
css
.modal {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.open {
opacity: 1;
visibility: visible;
}
.modal-content {
transform: scale(0.8);
transition: transform 0.3s ease;
}
.modal.open .modal-content {
transform: scale(1);
}Advanced Techniques
Staggered Animations
css
.item {
opacity: 0;
animation: fadeIn 0.5s ease forwards;
}
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }
.item:nth-child(4) { animation-delay: 0.4s; }Parallax Effect
css
.parallax {
transform: translateY(var(--scroll)) translateZ(-1px) scale(2);
}Morphing Shape
css
.shape {
width: 100px;
height: 100px;
background-color: blue;
transition: border-radius 0.5s ease;
}
.shape:hover {
border-radius: 50%;
}Accessibility
Respect User Preferences
css
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Best Practices
- 1Use transforms instead of position changes for better performance
- 2Keep animations simple - complex animations are harder to maintain
- 3Use will-change sparingly - it consumes memory
- 4Respect prefers-reduced-motion - some users prefer minimal motion
- 5Test on low-end devices - animations should be smooth everywhere
- 6Use hardware acceleration - promote elements to GPU when needed
Conclusion
CSS animations enhance user experience when used thoughtfully. Focus on smooth, performant animations that enhance rather than distract. Always consider accessibility and test across devices.