Interactive entry
Duration
Duration helps turn several changes into a readable rhythm.
Active entry
Preview, parameters, and exports
Duration helps turn several changes into a readable rhythm.
How long an animation takes
Browse categories420ms
28px
80ms
soft
.motion-card {
animation-name: motion-duration;
animation-duration: 420ms;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-delay: 80ms;
animation-fill-mode: both;
will-change: transform, opacity;
transform-origin: center;
}
@keyframes motion-duration {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.motion-card {
animation-name: motion-duration-reduced;
animation-duration: 180ms;
animation-delay: 0ms;
transform: none;
animation-iteration-count: 1;
}
}
@keyframes motion-duration-reduced {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Agent prompt
Use Duration for a UI fragment: Duration helps turn several changes into a readable rhythm. Animate transform and opacity, keep the duration at 420ms, use 28px of visual amplitude, add a 80ms delay, use soft easing (cubic-bezier(0.23, 1, 0.32, 1)), and include a reduced-motion fallback.
intent: entrancefeel: softcontext: card
- Use it when you need to turn several changes into a readable rhythm.
- Good for low- or medium-frequency UI changes that should stay short, clear, and interruptible.
- Copy the prompt or CSS and hand it to an agent for implementation.
- Preview Duration on a card, list item, or lightweight panel.
- Tune duration, travel, delay, and curve until Duration matches the surrounding interface.
- Prefer transform and opacity so motion stays off layout and paint work.
- Keep UI motion under 300ms; frequent feedback should be shorter.
- Avoid scale(0) and UI ease-in; use a physical starting point and a strong ease-out curve.
Under reduced motion, Duration removes travel, rotation, or looping and keeps a short fade or state comparison.