Transforms, transitions & animation
Transform, the individual rotate/scale/translate properties, transitions and keyframe animations.
<div nib="d=flex; g=16px">
<div nib="w=64px; h=64px; bdrd=12px; bgc=#4F52D9; ts=transform .3s cubic-bezier(.2,.8,.2,1); hover:tf=rotate(8deg) scale(1.08)"></div>
<div nib="w=64px; h=64px; bdrd=12px; bgc=#0891b2; ts=translate .3s; hover:trn=0 -8px"></div>
<div nib="w=64px; h=64px; bdrd=12px; bgc=#16a34a; ts=scale .2s; active:scl=.9"></div>
</div>Hover the first two, press the third. rot, scl and trn are the individual transform
properties — they combine with tf and animate independently.
Keyframe animations#
Declare @keyframes in your global CSS (or a page's custom CSS), then reference them with an:
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px) } }<span nib="d=inline-block; w=16px; h=16px; bdrd=999px; bd=2px solid #e2e8f0; bdtc=#4F52D9; an=spin .8s linear infinite"></span>
<div nib="an=fade-in .3s ease both">…</div>Reduced motion#
Respect users who asked for less motion with a custom breakpoint-free approach: define a recipe that only animates when motion is allowed, or add a global rule:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}All motion shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|