animationNieruchomość w CSS można stosować do animowania wiele innych właściwości CSS, takich jak color, background-color, height, lub width. Każda animacja musi być zdefiniowana za pomocą @keyframesreguły at, która jest następnie wywoływana z animationwłaściwością, na przykład:
.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )Każda @keyframesreguła at określa, co powinno się wydarzyć w określonych momentach animacji. Na przykład 0% to początek animacji, a 100% to koniec. Tymi klatkami kluczowymi można następnie sterować za pomocą animationwłaściwości shorthand lub jej ośmiu właściwości podrzędnych, aby zapewnić większą kontrolę nad sposobem manipulowania tymi klatkami kluczowymi.
Właściwości podrzędne
animation-name: deklaruje nazwę@keyframesreguły at do manipulowania.animation-duration: czas potrzebny na ukończenie animacji w jednym cyklu.animation-timing-function: ustanawia wstępnie ustawione krzywe przyspieszenia, takie jakeaselublinear.animation-delay: czas między wczytaniem elementu a rozpoczęciem sekwencji animacji (fajne przykłady).animation-direction: ustawia kierunek animacji po cyklu. Jej domyślne ustawienie resetuje się w każdym cyklu.animation-iteration-count: ile razy powinna zostać wykonana animacja.animation-fill-mode: ustawia, które wartości są stosowane przed / po animacji.
Na przykład możesz ustawić ostatni stan animacji tak, aby pozostał na ekranie lub przełączyć się z powrotem do stanu sprzed rozpoczęcia animacji.animation-play-state: wstrzymaj / odtwórz animację.
Te właściwości podrzędne można następnie wykorzystać w następujący sposób:
@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )Oto pełna lista wartości, które mogą przyjmować te właściwości podrzędne:
animation-timing-function | złagodzenie, złagodzenie, złagodzenie, złagodzenie, liniowe, sześcienne-bezier (x1, y1, x2, y2) (np. cubic-bezier (0,5, 0,2, 0,3, 1,0)) |
animation-duration | Xs lub Xms |
animation-delay | Xs lub Xms |
animation-iteration-count | X |
animation-fill-mode | do przodu, do tyłu, oba, żadne |
animation-direction | normalny, alternatywny |
animation-play-state | wstrzymany, bieganie, bieganie |
Wiele kroków
Jeśli animacja ma te same właściwości początku i końca, warto oddzielić wartości 0% i 100% przecinkami wewnątrz @keyframes:
@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )Wiele animacji
Możesz również oddzielić wartości przecinkami, aby zadeklarować wiele animacji na selektorze. W poniższym przykładzie chcemy zmienić kolor koła w a, @keyframejednocześnie przesuwając go z boku na bok innym.
.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )Wydajność
Animowanie większości właściwości jest związane z wydajnością, dlatego przed animowaniem dowolnej właściwości należy zachować ostrożność. Istnieją jednak pewne kombinacje, które można bezpiecznie animować:
transform: translate()transform: scale()transform: rotate()opacity
Które właściwości można animować?
MDN zawiera listę właściwości CSS, które można animować. Właściwości animowane mają tendencję do kolorów i liczb. Przykładem nieanimowalnej właściwości jest background-image.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5,1 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4 * | 6,0-6,1 * |
Więcej informacji
- animacja na MDN
- Korzystanie z animacji CSS
- animacja na W3C
- Jank busting dla lepszej wydajności renderowania
- Animacja internetowa w pracy
- Pięć sposobów na odpowiedzialne animowanie
- Skoki stanu, ujemne opóźnienia, animowanie pochodzenia i nie tylko
- Rozpoczęcie animacji CSS w połowie
- Animacje o wysokiej wydajności