Fundamenty
Ruch
Krótko, w jedną stronę, bez bibliotek. Ruch potwierdza, że coś się stało; nie opowiada historii.
- Stan rozdziału:
- gotowe
- Aplikacja dziś:
- rozjazd z brandbookiem
Co mówi brandbook
Cytat
Krótka przebitka 1 do 3 s. Logo w finale pozostaje czytelne przez co najmniej 2 s.
To dotyczy filmu, nie interfejsu. Dla interfejsu brandbook nie mówi nic, więc wartości poniżej są propozycją Kanonu.
Trzy czasy, jedna krzywa
- szybki120 msZmiana koloru przy najechaniu, ognisko klawiatury.
- zwykly200 msRozwinięcie menu, pojawienie się pastylki, przejście między zakładkami.
- wolny320 msWejście okna modalnego, rozwinięcie panelu bocznego.
- Szybki, 120 ms: zmiana koloru przy najechaniu, ognisko klawiatury, zmiana wagi. Użytkownik ma to poczuć, nie zobaczyć.
- Zwykły, 200 ms: rozwinięcie menu, pojawienie się pastylki, przejście między zakładkami, cień karty przy najechaniu.
- Wolny, 320 ms: wejście okna modalnego, wysunięcie panelu bocznego na telefonie. Nic w interfejsie nie trwa dłużej.
- Krzywa
cubic-bezier(0.2, 0, 0, 1): szybki start, miękkie zatrzymanie. Element wchodzi, nie odbija się. - Ruch idzie w jedną stronę: element się pojawia, nie skacze; rośnie, nie pulsuje. Wyjątek: kropka przy terminie, który minął, może pulsować raz na 2,4 s, jeśli w ogóle, i nigdy nie jest jedynym sygnałem.
- Zero bibliotek animacji. Przejścia CSS wystarczają na wszystko z tej listy.
Ograniczenie ruchu
prefers-reduced-motion: reduce wyłącza cały ruch: przejścia, animacje, płynne przewijanie. Elementy stoją od razu w pozycji końcowej. To jest warunek twardy, nie preferencja: część osób dostaje od ruchu na ekranie zawroty głowy. W Kanonie robi to reguła w theme.css, w aplikacji reguła na końcu globals.css.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}