English
Dutch
Beautiful CSS Animations and Transitions for Modern Web Interfaces
Contents
What Are CSS Animations?
CSS animations allow elements to change styles smoothly over time without JavaScript.
They’re ideal for hover effects, button transitions, loaders, and UI micro-interactions.
Language: CSS
/* Basic fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fadeIn 1s ease-in-out;
}Transitions vs. Keyframes
- Transitions handle changes between two states (like hover effects).
- Animations use
@keyframesfor complex multi-step effects.
Language: CSS
button {
background-color: #3b82f6;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2563eb;
}Button Hover Animation
Use CSS transitions to make hover effects feel natural and responsive.
Code Example (HTML + CSS):
Language: HTML
<button class="btn-animate">Hover Me</button>
Language: CSS
.btn-animate {
background: #1e3a8a;
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 6px;
cursor: pointer;
transition: transform 0.2s ease, background 0.3s ease;
}
.btn-animate:hover {
background: #2563eb;
transform: translateY(-3px);
}Card Hover Animation
Enhance your card UI with subtle scale and shadow transitions.
Language: HTML
<div class="card">Beautiful Animation</div>
Language: CSS
.card {
background: #fff;
border-radius: 10px;
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 1.5rem;
text-align: center;
}
.card:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}Bounce Animation
The @keyframes rule allows you to define multiple intermediate steps of an animation.
Language: HTML
<div class="bounce-ball"></div>
Language: CSS
.bounce-ball {
width: 50px;
height: 50px;
background: #10b981;
border-radius: 50%;
position: relative;
animation: bounce 1s ease infinite alternate;
}
@keyframes bounce {
from { transform: translateY(0); }
to { transform: translateY(-50px); }
}Fade and Slide In
Combine opacity and transform to create elegant entry effects.
Language: HTML
<div class="slide-box">Hello Animation!</div>
Language: CSS
.slide-box {
opacity: 0;
transform: translateY(30px);
animation: slideIn 1s ease forwards;
}
@keyframes slideIn {
to {
opacity: 1;
transform: translateY(0);
}
}