OnlineCBT
Describe several stages of one animation
@keyframes defines values at points in an animation timeline. The animation property chooses the keyframes, duration, timing and repetition. Use animation for a meaningful state or demonstration, not endless movement that competes with reading.
@keyframes reveal {
from { opacity: 0; transform: translateY(0.5rem); }
to { opacity: 1; transform: translateY(0); }
}
.notice { animation: reveal 220ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
.notice { animation: none; }
}The notice moves a short distance while becoming visible. The base content must remain readable when the animation is disabled. Avoid making essential text permanently opacity:0 outside an animation that might fail to run.
Important controls
animation-iteration-count sets repetition; infinite repeats without a natural stop. animation-direction can alternate the playback direction. animation-fill-mode determines whether keyframe values apply outside the active interval; it does not mean the DOM content has changed. animation-play-state can pause a running animation.
Timing and percentages
0% and 100% represent the start and end. Intermediate percentages let you define a multi-step sequence. If multiple animations write the same property, understand their composition rather than assuming every transform combines automatically.
Usability checks
Continuous motion should have an appropriate pause/stop mechanism when needed. Do not use rapid flashing. Keep a status message available as text; a spinning icon alone cannot tell a screen-reader user what is loading or whether it failed.
Practice
- Add a 50% keyframe and inspect the intermediate state.
- Change one-shot playback to two iterations and observe fill behavior.
- Emulate reduced motion and verify the notice remains visible.
- Build a progress state with a text label and a real error state instead of an endless spinner.
