CSS Animations and Transitions: Bringing Your Site to Life
Animations and transitions add polish and interactivity to your websites. They help guide users, provide feedback, and create engaging experiences. Let's explore both CSS transitions and animations.
CSS Transitions
Transitions smoothly change property values over time. They're perfect for hover effects and simple state changes.
Basic Syntax
.element {
transition: property duration timing-function delay;
}/ Example /
.button {
background: #3498db;
transition: background 0.3s ease;
}
.button:hover {
background: #2980b9;
}
Transition Properties
.element {
/ Individual properties /
transition-property: background, transform;
transition-duration: 0.3s, 0.5s;
transition-timing-function: ease, ease-out;
transition-delay: 0s, 0.1s; / Shorthand /
transition: background 0.3s ease,
transform 0.5s ease-out 0.1s;
/ All properties /
transition: all 0.3s ease;
}
Timing Functions
.element {
/ Built-in functions /
transition-timing-function: ease; / Default /
transition-timing-function: linear; / Constant speed /
transition-timing-function: ease-in; / Slow start /
transition-timing-function: ease-out; / Slow end /
transition-timing-function: ease-in-out; / Slow start and end / / Custom cubic-bezier /
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
Common Transition Examples
/ Smooth hover effect /
.card {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
/ Button scale effect /
.btn {
transition: transform 0.15s ease;
}
.btn:active {
transform: scale(0.95);
}
/ Fade effect /
.fade {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fade.visible {
opacity: 1;
visibility: visible;
}
CSS Animations
Animations provide more control with keyframes, allowing complex multi-step animations.
@keyframes Rule
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}/ Using percentages for more control /
@keyframes bounce {
0% { transform: translateY(0); }
25% { transform: translateY(-20px); }
50% { transform: translateY(0); }
75% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
Animation Properties
.element {
/ Individual properties /
animation-name: slideIn;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running; / Shorthand /
animation: slideIn 0.5s ease-out forwards;
}
Animation Direction
.element {
animation-direction: normal; / Default: 0% to 100% /
animation-direction: reverse; / 100% to 0% /
animation-direction: alternate; / 0% to 100%, then 100% to 0% /
animation-direction: alternate-reverse; / Opposite of alternate /
}
Fill Mode
.element {
animation-fill-mode: none; / Default: no styles applied before/after /
animation-fill-mode: forwards; / Keep final keyframe styles /
animation-fill-mode: backwards; / Apply first keyframe during delay /
animation-fill-mode: both; / Apply both forwards and backwards /
}
Practical Animation Examples
Loading Spinner
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Pulse Effect
.pulse {
animation: pulse 2s ease-in-out infinite;
}@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
Fade In Up
.fade-in-up {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
}@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
Shake Effect
.shake {
animation: shake 0.5s ease;
}@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-10px); }
40% { transform: translateX(10px); }
60% { transform: translateX(-10px); }
80% { transform: translateX(10px); }
}
Typing Effect
Hello, World!
.typing {
width: 0;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid;
animation:
typing 2s steps(13) forwards,
blink 0.7s step-end infinite;
}@keyframes typing {
to { width: 100%; }
}
@keyframes blink {
50% { border-color: transparent; }
}
Performance Tips
1. Animate Transform and Opacity
These properties are hardware-accelerated:
/ Good - GPU accelerated /
.element {
transition: transform 0.3s, opacity 0.3s;
}/ Avoid - causes repaints /
.element {
transition: left 0.3s, width 0.3s;
}
2. Use will-change Sparingly
.element {
will-change: transform; / Hints browser to optimize /
}/ Remove after animation /
.element:hover {
will-change: auto;
}
3. Respect Motion Preferences
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Complete Interactive Example
Try this button in ProLiveEditor:
.animated-btn {
position: relative;
padding: 15px 40px;
font-size: 18px;
font-weight: bold;
color: white;
background: linear-gradient(45deg, #667eea, #764ba2);
border: none;
border-radius: 50px;
cursor: pointer;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}.animated-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.animated-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
.animated-btn:hover::before {
width: 300px;
height: 300px;
}
.animated-btn:active {
transform: translateY(-1px);
}
.animated-btn span {
position: relative;
z-index: 1;
}
Experiment with these animations in ProLiveEditor! The live preview makes it easy to tweak timing and effects until they're perfect.