CSS Animations for Beginners: Transitions & Keyframes
Small animations make a website feel alive. You don't need JavaScript for most of them — CSS can do hover effects, fades, slides and loaders on its own.
By Learn Refill Mentors · Updated
Why learn CSS Animations?
- Makes your projects look premium
- Improves user experience with clear feedback
- Pure CSS animations are fast and lightweight
1Smooth hover effects with transition
transition tells the browser to animate a property change instead of jumping instantly.
.button {
background: #6b1e2b;
transition: background 0.3s ease;
}
.button:hover {
background: #b68a4c;
}2Move and scale with transform
transform can move (translate), grow (scale) or rotate elements. It is also the smoothest property to animate.
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-6px) scale(1.02);
}3Create a keyframe animation
@keyframes defines the steps of an animation. Then attach it to an element with the animation property.
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-title {
animation: fadeUp 0.8s ease-out;
}4Build a simple loader
A spinning circle is just a border with one colored side, rotated forever.
.loader {
width: 40px; height: 40px;
border: 4px solid #eee;
border-top-color: #b68a4c;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }5Respect reduced-motion users
Some people get dizzy from motion. This media query turns animations off for them.
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}Common mistakes
- Animating width, height or top — use transform and opacity instead
- Making animations too long or too many at once
- Forgetting reduced-motion users
Practice task
Add a fade-up animation to your hero title, a lift effect on cards and a loading spinner to your portfolio.
Frequently asked questions
Do CSS animations slow down a website?
Not if you animate transform and opacity — browsers run those on the GPU, so they stay smooth.