Discover elegant and efficient ways to bring your web designs to life with CSS.
CSS animations are a powerful tool for creating dynamic and engaging user experiences without relying on JavaScript for simple visual effects. This page explores common and effective patterns for applying animations to web elements.
This pattern uses the `translateX` transform and `opacity` to make an element smoothly slide into view from the left.
This box slides in!
/* Apply to the element */
.slide-in {
animation: slideInFromLeft 1.5s ease-out forwards;
}
/* Define the keyframes */
@keyframes slideInFromLeft {
from { transform: translateX(-150%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}Ideal for drawing attention without being too jarring, this creates a gentle pulsing grow and shrink effect.
Gentle pulse...
/* Apply to the element */
.pulse-effect {
animation: pulse 2s infinite ease-in-out;
}
/* Define the keyframes */
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}A classic for spinners or decorative elements, this animates an element through a full 360-degree rotation.
Spinning merrily!
/* Apply to the element */
.rotate-spin {
animation: rotateSpin 3s linear infinite;
}
/* Define the keyframes */
@keyframes rotateSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}Used for elements that are meant to disappear after a certain time or action, fading them out smoothly.
This box will fade away.
/* Apply to the element */
.fade-out {
animation: fadeOut 1.5s ease-in forwards;
}
/* Define the keyframes */
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}