Start with a simple reveal
CSS keyframes describe how a style changes over time. A basic reveal can move text a few pixels upward while its opacity changes from transparent to fully visible. The movement should be small enough that the reader can still track the text naturally.
Keep animation properties separate from content. A heading should remain understandable when animation is disabled, the page loads slowly or a browser does not support a visual effect. Do not make essential information appear only after a long or unpredictable animation.
.text-reveal {
animation: textReveal 500ms ease-out both;
}
@keyframes textReveal {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}Choose speed and easing intentionally
Very fast effects can look abrupt, while long effects delay reading. A short transition in the range of a few hundred milliseconds can work for a small heading, but the right duration depends on the purpose and the amount of movement. Use ease-out for an entrance that settles, or a steady timing function when a constant speed is important.
Avoid animating many sentences at once in a way that forces the reader to wait. If the goal is a typewriter effect for an AI response, preserve a way to skip or stop the animation so long answers do not become frustrating.
Respect reduced-motion preferences
Some visitors prefer less motion because of vestibular conditions, migraines, attention needs or personal comfort. CSS can detect a system preference with prefers-reduced-motion. Provide a reduced-motion rule that removes unnecessary movement or changes the effect to a simpler fade.
Do not use flashing effects to attract attention. Motion should be predictable and should not prevent people from reading, selecting or interacting with a control. Follow the platform’s accessibility guidance and test with reduced motion enabled.
@media (prefers-reduced-motion: reduce) {
.text-reveal {
animation: none;
opacity: 1;
transform: none;
}
}Use semantic HTML and readable contrast
Apply animation to meaningful text elements such as a heading, status message or label. Keep the real text in the document rather than drawing letters into a canvas solely for decoration. Use sufficient contrast between the text and background, and do not rely on animation or colour alone to communicate whether a process succeeded or failed.
If a screen reader is involved, avoid repeatedly replacing the entire text node at every frame. For status updates, use an appropriate live region only when needed and do not announce every character. Visual animation and accessible information should work together.
A subtle use case for an AI dashboard
A dashboard might reveal its welcome heading when the page first loads, then use a calmer transition for tool cards. Keep the animation sequence short; the search box and chat input should be ready to use immediately. If cards are dynamically inserted after a search, do not replay a large entrance animation on every keystroke.
Measure performance on a modest device. Prefer opacity and transform for many simple effects instead of repeatedly animating layout dimensions that cause reflow. A visually polished interface should still scroll, type and respond promptly.
Test the animation before publishing
Check it on desktop and mobile, with keyboard navigation, with reduced motion enabled and at different zoom levels. Make sure animated text does not overlap neighbouring cards. Confirm that the page remains useful with CSS disabled and that the animation does not hide or delay important instructions.
If the effect is only decorative, keep the default state complete and understandable. Good animation is a small enhancement to clear design, not a substitute for good hierarchy or content.