CSS Animations Transitions
Smooth Animations and Transitions
Add motion with CSS transitions, keyframes, transforms.
Transitions
.button {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}Keyframes Animations
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}Transforms
- scale(1.05), rotate(5deg), translateX(10px)
- transform-origin: center bottom
- will-change: transform