Answer
Create a CSS animation by defining @keyframes and assigning it with animation properties. • Animate properties that match the intended effect and test rendering cost. • Set duration and timing deliberately instead of relying on defaults. • Provide a reduced-motion alternative for non-essential movement.
💡 Simple Example
.notice { animation: enter .3s ease-out both; }
@keyframes enter { from { opacity: 0; transform: translateY(.5rem); } }
⚡ Quick Revision
Define keyframes, apply an animation, and respect reduced-motion preferences.