Transition and Animation Longhands
What Is It?
Longhand properties make timing, delay, direction, repetition, and fill behavior explicit. This is useful when a shorthand becomes difficult to read.
Properties, Tags and Attributes Explained
transition-property / transition-duration: Choose which properties interpolate and for how long.transition-delay / transition-timing-function: Set the waiting time and interpolation curve.animation-name / animation-duration: Select keyframes and the duration of one cycle.animation-iteration-count / animation-direction: Set repetition and forward, reverse, or alternating playback.animation-delay / animation-fill-mode: Control start timing and whether styles apply outside the active interval.animation-play-state: running or paused controls playback.animation-timing-function: Sets how progress is interpolated during an animation segment, such as linear or ease-in-out.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Delayed transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition and Animation Longhands</title>
<style>
button { padding: 12px; background: #dbeafe; transition-property: background-color; transition-duration: 400ms; transition-delay: 150ms; transition-timing-function: ease-in-out; }
button:hover, button:focus-visible { background: #fde68a; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
</style>
</head>
<body>
<button type="button">Hover or focus, then wait briefly</button>
</body>
</html>What you see: The background change starts after a short delay and takes 400ms.
Example 2: Finite animation with fill
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition and Animation Longhands</title>
<style>
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } }
.tile { width: 80px; padding: 12px; background: #c7d2fe; animation-name: slide; animation-duration: 1s; animation-iteration-count: 2; animation-direction: alternate; animation-fill-mode: forwards; }
.tile:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tile { animation: none; } }
</style>
</head>
<body>
<div class="tile">Pause on hover</div>
</body>
</html>What you see: The tile moves out and back over two cycles. Hover pauses it while it is running.
Example 3: Delay the start of an animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition and Animation Longhands</title>
<style>
@keyframes reveal { from { opacity: .2; } to { opacity: 1; } }
.box { padding: 16px; background: #dbeafe; animation-name: reveal; animation-duration: 1s; animation-delay: 800ms; animation-fill-mode: backwards; animation-timing-function: linear; }
@media (prefers-reduced-motion: reduce) { .box { animation: none; } }
</style>
</head>
<body>
<div class="box">Wait briefly, then watch the fade.</div>
</body>
</html>What you see: The 800ms delay precedes the fade. backwards applies the starting keyframe during that wait. Use animation-delay for intentional sequencing, without delaying access to essential content.
When and Where to Use It
Use longhands when reviewing several effects with different timing or when teaching how an animation is assembled.
Common Mistake or Useful Tip
forwards retains the last sampled keyframe for the chosen direction and iteration count; it does not rewrite the underlying CSS value.
Try It Yourself
Use one iteration and normal direction to see a different retained end state.