Podstawowa deklaracja i użycie
@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )Ze względu na zwięzłość reszta kodu na tej stronie nie będzie używać żadnych prefiksów, ale w prawdziwym świecie należy używać wszystkich prefiksów dostawców z góry
Wiele kroków
@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )Jeśli animacja ma te same właściwości początku i końca, jednym ze sposobów jest oddzielenie wartości 0% i 100% przecinkami:
@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )Możesz też zawsze powiedzieć animacji, aby uruchomiła się dwukrotnie (lub dowolną liczbę razy) i wskazać kierunek alternate.
Wywołanie animacji klatki kluczowej z oddzielnymi właściwościami
.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )Skrót animacji
Po prostu oddziel wszystkie poszczególne wartości spacjami. Kolejność nie ma znaczenia, z wyjątkiem sytuacji, gdy używasz zarówno czasu trwania, jak i opóźnienia, muszą być w tej kolejności. W poniższym przykładzie 1s = czas trwania, 2s = opóźnienie, 3 = iteracje.
animation: test 1s 2s 3 alternate backwardsPołącz transformację i animację
@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )Wiele animacji
Wartości można oddzielić przecinkami, aby zadeklarować wiele animacji na selektorze.
.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )Kroki()
Funkcja steps () kontroluje dokładnie, ile klatek kluczowych zostanie wyrenderowanych w przedziale czasowym animacji. Powiedzmy, że deklarujesz:
@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )Jeśli użyjesz kroków (10) w swojej animacji, zapewni to tylko 10 klatek kluczowych w wyznaczonym czasie.
.move ( animation: move 10s steps(10) infinite alternate; )Tam matematyka dobrze się sprawdza. Co sekundę element będzie przesuwał się o 10 pikseli w lewo i 10 w dół, aż do końca animacji, a następnie ponownie na zawsze w odwrotnym kierunku.
Może to być świetne w przypadku animacji arkusza sprite'ów, takiej jak ta demonstracja autorstwa simurai.
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 zasobów
- MDN Docs
- MDN: Korzystanie z animacji CSS
- Can I Use - Browser Support
- WIDEO: Wprowadzenie do animacji CSS