YouTip

CSS3 Transitions and Animations

📅 2026-06-12 | 📂 CSS3

Transitions

.button {
    background: blue;
    transition: background 0.3s ease;
}
.button:hover { background: red; }

Animations

@keyframes slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
.slide-in { animation: slide 0.5s ease-out; }

Summary

transitions animate between two states
@keyframes defines multi-step animations