Motion
Ang motion ay tahimik at mabilis. Kinukumpirma nito ang isang action o pinapadali ang isang pagbabago ng state; hindi ito kailanman dekorasyon. At humihinto ito sa sandaling humingi ng mas kaunti ang isang bisita.
Mga duration at curve
Karamihan ng mga transition ay tumatakbo sa ikalimang bahagi ng isang segundo sa isang ease curve: isang paglipat ng kulay kapag naka-hover, isang border na humuhupa. Ang theme swap ay tumatakbo nang bahagyang mas mahaba upang hindi biglaan ang isang buong-pahinang repaint. Ang mga pahina ay pumapaitaas nang ilang pixel kapag naglo-load. Ang mga bottom sheet ang tanging mapagpahayag na galaw, dumudulas papasok sa isang spring curve.
| Motion | Value |
|---|---|
| Default na transition | 0.2s ease |
| Theme swap | 0.3s ease |
| Page fade-in | 0.3s, up 8px |
| Hover lift | up 2px + shadow |
| Sheet spring | cubic-bezier(0.32, 0.72, 0, 1) |
Reduced motion
Kapag humingi ang system ng isang bisita ng reduced motion, iginagalang ito ng site nang walang eksepsiyon. Ang mga animation at transition ay bumabagsak sa halos zero, at ang smooth scrolling ay bumabalik sa isang biglaang lundag. Ito ang rule, hindi isang palamuti:
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}