Syntax animácie kľúčových snímok - Triky CSS

Anonim

Základné vyhlásenie a použitie

@-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+ */ )

Z dôvodu stručnosti nebude zvyšok kódu na tejto stránke používať žiadne predpony, ale použitie v skutočnom svete by malo používať všetky predpony dodávateľov zhora

Viaceré kroky

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Ak má animácia rovnaké počiatočné a koncové vlastnosti, jedným zo spôsobov, ako to urobiť, je oddeliť hodnoty 0% a 100% čiarkou:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Alebo môžete animácii vždy povedať, aby sa spustila dvakrát (alebo párny počet) a povedala smeru alternate.

Volanie animácie kľúčových snímok so samostatnými vlastnosťami

.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 */ )

Stenografia animácie

Stačí oddeliť všetky jednotlivé hodnoty medzerou. Na poradí nezáleží, okrem prípadov, keď sa použije trvanie aj oneskorenie, musia byť v tomto poradí. V príklade nižšie 1 s = trvanie, 2 s = oneskorenie, 3 = iterácie.

animation: test 1s 2s 3 alternate backwards

Kombinujte transformáciu a animáciu

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Viac animácií

Hodnoty môžete oddeliť čiarkou a deklarovať tak viac animácií na selektore.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Kroky ()

Funkcia steps () presne určuje, koľko kľúčových snímok sa vykreslí v časovom rámci animácie. Povedzme, že deklarujete:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Ak vo svojej animácii použijete kroky (10), zaistí sa, že v stanovenom čase dôjde iba k 10 kľúčovým snímkam.

.move ( animation: move 10s steps(10) infinite alternate; )

Matika tam pekne funguje. Každú sekundu sa element bude pohybovať o 10 pixelov doľava a 10 pixelov nadol, až do konca animácie, a potom opäť navždy opačne.

To môže byť skvelé pre animáciu spritesheet, ako je toto demo od simurai.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
4 * 5 * 10 12 5,1 *

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6,0-6,1 *

Ďalšie zdroje

  • Dokumenty MDN
  • MDN: Používanie animácie CSS
  • Môžem použiť - Podpora prehľadávača
  • VIDEO: Úvod do animácií CSS