Design values, direction and motion · Lesson 16 of 17
Keyframes and bounded animation
Sequence motion without requiring hover.
8 minutes2 games
keyframes defines animation stages; animation attaches them to an element with duration and iteration count. Prefer brief motion to explain an event and avoid endless repetition. This example reveals a badge once.
HTML
<style>
@keyframes arrive {from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:translateY(0)}}
.badge {display:inline-block;padding:12px;background:#dcfce7;animation:arrive 250ms ease-out both;}
@media (prefers-reduced-motion:reduce) {.badge {animation:none;}}
</style>
<span class="badge">Lesson saved</span>from: initial state
Interpolated values
to: final state
Quick question
Which value disables animation?
Exercise
Disable the animation on .badge with animation:none.
HTML
<style>.badge{animation:pulse 1s infinite}</style><span class="badge">Saved</span>Learn more from
Played 0 of 2 games
Sign in to save your progress and earn XP.