Animering - CSS-tricks

Anonim

Den animationegenskap i CSS kan användas för att animera många andra CSS-egenskaper, såsom color, background-color, height, eller width. Varje animering måste definieras med @keyframesat-regeln som sedan kallas för animationegenskapen, så här:

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

Varje @keyframesat-rule definierar vad som ska hända vid specifika ögonblick under animeringen. Till exempel är 0% början på animationen och 100% är slutet. Dessa nyckelbilder kan sedan styras antingen av förkortningsegenskapen animationeller dess åtta underegenskaper för att ge mer kontroll över hur dessa nyckelbilder ska manipuleras.

Underegenskaper

  • animation-name: förklarar namnet på @keyframesat-rule att manipulera.
  • animation-duration: hur lång tid det tar för en animering att slutföra en cykel.
  • animation-timing-function: skapar förinställda accelerationskurvor som easeeller linear.
  • animation-delay: tiden mellan elementet som laddas och början av animationssekvensen (coola exempel).
  • animation-direction: ställer in riktningen för animeringen efter cykeln. Standardinställningarna återställs för varje cykel.
  • animation-iteration-count: antalet gånger animeringen ska utföras.
  • animation-fill-mode: ställer in vilka värden som ska tillämpas före / efter animeringen.
    Du kan till exempel ställa in det sista tillståndet för animeringen som ska förbli på skärmen, eller du kan ställa in att den ska växla tillbaka till innan animeringen började.
  • animation-play-state: pausa / spela upp animationen.

Dessa underegenskaper kan sedan användas så:

@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )

Här är en fullständig lista över vilka värden var och en av dessa underegenskaper kan ta:

animation-timing-function lätthet, lätthet, lätthet, lätthet, linjär, kubisk-bezier (x1, y1, x2, y2) (t.ex. kubisk-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs eller Xms
animation-delay Xs eller Xms
animation-iteration-count X
animation-fill-mode framåt, bakåt, båda, ingen
animation-direction normal, alternativ
animation-play-state pausad, springande, springande

Flera steg

Om en animering har samma start- och slutegenskaper är det användbart att komma-separera värdena 0% och 100% inuti @keyframes:

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

Flera animationer

Du kan kommaseparera värdena för att deklarera flera animationer på en väljare också. I exemplet nedan vill vi ändra färg på cirkeln @keyframesamtidigt som vi knuffar den från sida till sida med en annan.

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

Prestanda

Att animera de flesta fastigheter är ett problem med prestanda, så vi bör vara försiktiga innan vi animerar någon egendom. Det finns dock vissa kombinationer som kan animeras säkert:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Vilka egenskaper kan animeras?

MDN har en lista över CSS-egenskaper som kan animeras. Animerbara egenskaper tenderar till färger och siffror. Ett exempel på en egenskap som inte kan animeras är background-image.

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 *

Mer information

  • animering på MDN
  • Använda CSS-animationer
  • animering på W3C
  • Jank busting för bättre rendering prestanda
  • Webb-animation på jobbet
  • Fem sätt att animera ansvarsfullt
  • Statlig hoppning, negativa förseningar, animering av ursprung och mer
  • Startar CSS-animationer halvvägs
  • Högpresterande animationer