CSS 3 · Positioning, effects and animation
Create an animation
Define keyframes and apply them.
@keyframes fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.card {
animation: fade-in 0.3s ease-out;
}
More positioning, effects and animation commands
- Stick an element while scrolling
- Cover the parent
- Crop an image to fit its box
- Truncate text with an ellipsis
- Limit text to a number of lines
- Animate a change smoothly
All positioning, effects and animation commands · CSS 3 cheatsheet