Moviment
El moviment és discret i ràpid. Confirma una acció o suavitza un canvi d'estat; mai no és decoració. I s'atura en el moment que un visitant en demana menys.
Durades i corbes
La majoria de transicions duren una cinquena part de segon amb una corba suau: un canvi de color en passar-hi per sobre, una vora que s'assenta. El canvi de tema dura una mica més perquè el repintat de tota la pàgina no sigui brusc. Les pàgines apareixen amb un fos i pugen uns quants píxels en carregar-se. Els fulls inferiors són l'únic moviment expressiu, i llisquen cap endins amb una corba elàstica.
| Moviment | Valor |
|---|---|
| Transició per defecte | 0.2s ease |
| Canvi de tema | 0.3s ease |
| Fos d'entrada de pàgina | 0.3s, up 8px |
| Elevació en passar-hi per sobre | up 2px + shadow |
| Elasticitat del full | cubic-bezier(0.32, 0.72, 0, 1) |
Moviment reduït
Quan el sistema d'un visitant demana moviment reduït, el lloc ho respecta sense excepció. Les animacions i les transicions es redueixen a una engruna per sobre de zero, i el desplaçament suau torna a un salt. Aquesta és la regla, no una cortesia:
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}