Syntaxe animace klíčových snímků - Triky CSS

Anonim

Základní prohlášení a použití

@-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 zbytek kódu na této stránce používat žádné předpony, ale použití v reálném světě by mělo používat všechny předpony dodavatele shora

Několik kroků

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

Pokud má animace stejné počáteční a koncové vlastnosti, jedním ze způsobů je oddělit hodnoty 0% a 100% čárkou:

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

Nebo můžete animaci vždy říci, aby běžela dvakrát (nebo libovolně sudě) a určila směr alternate.

Volání animace klíčových snímků se samostatnými vlastnostmi

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

Zkratka animace

Prostě oddělte všechny jednotlivé hodnoty mezerou. Na pořadí nezáleží, kromě případů, kdy použijete trvání i zpoždění, musí být v tomto pořadí. V níže uvedeném příkladu 1s = doba trvání, 2s = zpoždění, 3 = iterace.

animation: test 1s 2s 3 alternate backwards

Kombinujte transformaci a animaci

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

Více animací

Hodnoty můžete oddělit čárkami a deklarovat více animací na selektoru.

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

Kroky ()

Funkce steps () přesně řídí, kolik klíčových snímků se vykreslí v časovém rámci animace. Řekněme, že prohlašujete:

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

Pokud ve své animaci použijete kroky (10), zajistí se, že v přiděleném čase proběhne pouze 10 klíčových snímků.

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

Matematika tam funguje dobře. Každou jednu sekundu se prvek bude pohybovat 10px doleva a 10px dolů, až do konce animace, a pak znovu navždy navždy.

To může být skvělé pro animaci spritesheet, jako je toto demo od simurai.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
4 * 5 * 10 12 5,1 *

Mobilní / Tablet

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

Další zdroje

  • Dokumenty MDN
  • MDN: Používání CSS Animation
  • Mohu použít - Podpora prohlížeče
  • VIDEO: Úvod do CSS animací