Keyframe Animation Syntax - CSS-tricks

Anonim

Grundförklaring och användning

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

För korthetens skull kommer resten av koden på denna sida inte att använda några prefix, men den verkliga världen bör använda alla leverantörsprefix från ovan

Flera steg

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

Om en animation har samma start- och slutegenskaper är ett sätt att göra det att komma-separera värdena 0% och 100%:

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

Eller så kan du alltid berätta för animeringen att köra två gånger (eller valfritt antal gånger) och berätta riktningen alternate.

Anropar keyframe-animering med separata 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 */ )

Animation stenografi

Bara mellanseparera alla individuella värden. Beställningen spelar ingen roll förutom när du använder både varaktighet och fördröjning, de måste vara i den ordningen. I exemplet nedan 1s = varaktighet, 2s = fördröjning, 3 = iterationer.

animation: test 1s 2s 3 alternate backwards

Kombinera transformation och animering

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

Flera animationer

Du kan kommaseparera värdena för att deklarera flera animationer på en väljare.

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

Steg()

Stegen () -funktionen styr exakt hur många nyckelbilder som ska återges inom animeringens tidsram. Låt oss säga att du förklarar:

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

Om du använder steg (10) i din animering, kommer det att se till att endast 10 keyframes händer under den tilldelade tiden.

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

Matematiken fungerar bra där. Varannan sekund kommer elementet att flyttas 10 pixlar till vänster och 10 pixlar ner, tills slutet av animationen, och sedan igen i omvänd evighet.

Detta kan vara bra för spritesheet-animering som denna demo av simurai.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
4 * 5 * 10 12 5,1 *

Mobil / surfplatta

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

Fler resurser

  • MDN-dokument
  • MDN: Använda CSS Animation
  • Kan jag använda - Webbläsarsupport
  • VIDEO: Introduktion till CSS-animationer