Syntaks på animationsnøgleramme - CSS-tricks

Anonim

Grundlæggende erklæring og anvendelse

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

For kortfattethed vil resten af ​​koden på denne side ikke bruge nogen præfikser, men brug i den virkelige verden skal bruge alle sælgerpræfikser ovenfra

Flere trin

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

Hvis en animation har de samme start- og slutegenskaber, er en måde at gøre det ved at kommaseparere værdierne 0% og 100%:

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

Eller du kan altid fortælle animationen at køre to gange (eller et hvilket som helst lige antal gange) og fortælle retningen til alternate.

Opkald til keyframe-animation med separate egenskaber

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

Animation stenografi

Bare plads-adskille alle de individuelle værdier. Ordren betyder ikke noget, undtagen når du bruger både varighed og forsinkelse, de skal være i den rækkefølge. I eksemplet nedenfor 1s = varighed, 2s = forsinkelse, 3 = iterationer.

animation: test 1s 2s 3 alternate backwards

Kombiner transformation og animation

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

Flere animationer

Du kan kommaseparere værdierne for at erklære flere animationer på en vælger.

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

Trin ()

Funktionen trin () styrer nøjagtigt, hvor mange nøglerammer, der gengives i animationens tidsramme. Lad os sige, at du erklærer:

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

Hvis du bruger trin (10) i din animation, vil det sikre, at der kun sker 10 nøglerammer i den tildelte tid.

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

Matematikken fungerer godt der. Hvert sekund bevæger elementet sig 10 pixel til venstre og 10 pixel ned, indtil slutningen af ​​animationen og derefter igen i omvendt for evigt.

Dette kan være fantastisk til spritesheet-animation som denne demo af simurai.

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
4 * 5 * 10 12 5.1 *

Mobil / tablet

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

Flere ressourcer

  • MDN Docs
  • MDN: Brug af CSS-animation
  • Kan jeg bruge - Browsersupport
  • VIDEO: Introduktion til CSS-animationer