Setting the file. One moment.
Skill 06 · Bencium Innovative UX Designer
Subchapter 6.3
MOTION-SPEC.mdMarkdown2 KBView on GitHub
Motion should surprise and delight while serving function. Animation is a creative tool.
| Easing | CSS | Use For |
|---|---|---|
| Ease-out | cubic-bezier(0.0, 0.0, 0.2, 1) | Entrances, appearing |
| Ease-in | cubic-bezier(0.4, 0.0, 1, 1) | Exits, disappearing |
| Ease-in-out | cubic-bezier(0.4, 0.0, 0.2, 1) | State changes, transforms |
| Spring | cubic-bezier(0.68, -0.55, 0.265, 1.55) | Playful, attention-grabbing |
| Linear | linear | Spinners, continuous loops |
| Weight | Duration | Examples |
|---|---|---|
| Lightweight | 150ms | Icons, badges, chips |
| Standard | 300ms | Cards, panels, list items |
| Weighty | 500ms | Modals, page transitions |
| Interaction | Duration |
|---|---|
| Button press | 100ms |
| Hover state | 150ms |
| Tooltip appear | 200ms |
| Tab switch | 250ms |
| Modal open | 300ms |
| Page transition | 400ms |
// Hover transition (CSS)
<button className="transition-colors duration-150 ease-out hover:bg-blue-700">
// Fade + slide (Framer Motion)
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, ease: "easeOut" }}
/>
// Stagger children
<motion.ul variants={{ visible: { transition: { staggerChildren: 0.1 } } }}>
<motion.li variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }} />
</motion.ul>transform and opacity (GPU-accelerated)width, height, margin, paddingprefers-reduced-motion:@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}