Bring CSS to life with transforms, transitions, keyframe animations, and timing functions.
transform moves, scales, rotates, or skews without affecting layout. The element's original space is preserved. Transforms are GPU-accelerated — prefer them over animating top/left for smooth performance.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.box { width: 80px; height: 80px; background: steelblue; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 6px; }
.translate { transform: translate(20px, -10px); }
.scale { transform: scale(1.4); }
.rotate { transform: rotate(30deg); }
.skew { transform: skew(15deg, 5deg); }
.combo { transform: rotate(15deg) scale(1.2); background: tomato; }
</style>
</head><body>
<div class="box">original</div>
<div class="box translate">translate</div>
<div class="box scale">scale</div>
<div class="box rotate">rotate</div>
<div class="box skew">skew</div>
<div class="box combo">combo</div>
</body></html>transition animates a CSS property smoothly when it changes (e.g. on hover). One declaration: property duration timing delay. Tip: name specific properties instead of all to avoid unintended animation.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 24px; display: flex; flex-wrap: wrap; gap: 16px; }
.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; color: white; }
.color { background: steelblue; transition: background 0.3s ease; }
.color:hover { background: #1e40af; }
.scale { background: tomato; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.scale:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(239,68,68,0.4); }
.slide { background: #059669; transition: padding-left 0.3s ease; }
.slide:hover { padding-left: 32px; }
.all { background: #7c3aed; transition: all 0.3s ease; }
.all:hover { background: #4c1d95; border-radius: 20px; letter-spacing: 2px; }
</style>
</head><body>
<button class="btn color">Color</button>
<button class="btn scale">Scale</button>
<button class="btn slide">Slide padding</button>
<button class="btn all">Transition all</button>
</body></html>@keyframes defines the steps. Then animation: name applies it. Use percentage steps for fine control — not just from/to.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
@keyframes slide-in {
from { transform: translateX(-60px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes color-shift {
0% { background: #3b82f6; }
33% { background: #ef4444; }
66% { background: #22c55e; }
100% { background: #3b82f6; }
}
.pulse { width: 60px; height: 60px; background: steelblue; border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; }
.slide { background: tomato; color: white; padding: 10px 16px; border-radius: 6px; animation: slide-in 0.6s ease forwards; }
.spin { width: 40px; height: 40px; border: 4px solid #e5e7eb; border-top-color: steelblue; border-radius: 50%; animation: spin 0.8s linear infinite; }
.colors { width: 80px; height: 80px; border-radius: 8px; animation: color-shift 3s linear infinite; }
</style>
</head><body>
<div class="pulse"></div>
<div class="slide">slide-in</div>
<div class="spin"></div>
<div class="colors"></div>
</body></html>The animation shorthand: name duration timing delay count direction fill-mode. fill-mode: forwards keeps the final frame after the animation ends. Try editing the timing functions below.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
@keyframes move { from { transform: translateX(0); } to { transform: translateX(180px); } }
.box { width: 80px; height: 36px; border-radius: 6px; color: white; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.ease-in { background: #3b82f6; animation: move 1.5s ease-in infinite alternate; }
.ease-out { background: #ef4444; animation: move 1.5s ease-out infinite alternate; }
.linear { background: #22c55e; animation: move 1.5s linear infinite alternate; }
.bounce { background: #f59e0b; animation: move 1.5s cubic-bezier(0.34,1.56,0.64,1) infinite alternate; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.forwards { background: steelblue; animation: fade 1s ease 0.5s 1 normal forwards; }
</style>
</head><body>
<div class="box ease-in">ease-in</div>
<div class="box ease-out">ease-out</div>
<div class="box linear">linear</div>
<div class="box bounce">bounce</div>
<p style="font-size:13px;color:#555;margin-top:4px">fill-mode: forwards holds last frame</p>
<div class="box forwards">forwards</div>
</body></html>