Nøkkelramme-animasjonssyntaks - CSS-triks

Anonim

Grunnleggende erklæring og bruk

@-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 korthets skyld vil ikke resten av koden på denne siden bruke noen prefikser, men bruk i den virkelige verden bør bruke alle leverandørprefikser ovenfra

Flere trinn

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

Hvis en animasjon har de samme start- og sluttegenskapene, er en måte å gjøre det på kommadeling av verdiene 0% og 100%:

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

Eller du kan alltid be animasjonen om å kjøre to ganger (eller et jevnt antall ganger) og fortelle retningen til alternate.

Kaller keyframe-animasjon med separate egenskaper

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

Animasjon Shorthand

Bare skille mellomrom alle individuelle verdier. Bestillingen spiller ingen rolle, bortsett fra når du bruker både varighet og forsinkelse, de må være i den rekkefølgen. I eksemplet nedenfor 1s = varighet, 2s = forsinkelse, 3 = iterasjoner.

animation: test 1s 2s 3 alternate backwards

Kombiner transformasjon og animasjon

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

Flere animasjoner

Du kan kommaseparere verdiene for å erklære flere animasjoner på en velger.

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

Trinn ()

Trinnene () -funksjonen kontrollerer nøyaktig hvor mange nøkkelbilder som skal gjengis i animasjonsrammen. La oss si at du erklærer:

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

Hvis du bruker trinn (10) i animasjonen din, vil det sørge for at bare 10 nøkkelbilder skjer i den tildelte tiden.

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

Matematikken fungerer fint der. Hvert sekund vil elementet bevege seg 10px til venstre og 10px ned, til slutten av animasjonen, og deretter igjen i revers for alltid.

Dette kan være bra for spritesheet-animasjon som denne demo av simurai.

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
4 * 5 * 10 12 5,1 *

Mobil / nettbrett

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

Flere ressurser

  • MDN Docs
  • MDN: Bruke CSS-animasjon
  • Kan jeg bruke - Nettleserstøtte
  • VIDEO: Introduksjon til CSS-animasjoner