Animasjon - CSS-triks

Anonim

Den animationeiendom i CSS kan brukes til å animere mange andre CSS egenskaper som color, background-color, height, eller width. Hver animasjon må defineres med @keyframesat-regelen som deretter kalles for animationeiendommen, slik:

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

Hver @keyframesat-rule definerer hva som skal skje på bestemte øyeblikk under animasjonen. For eksempel er 0% begynnelsen på animasjonen og 100% er slutten. Disse nøkkelbildene kan deretter kontrolleres enten av stenografiegenskapen animation, eller dens åtte underegenskaper, for å gi mer kontroll over hvordan disse nøkkelbildene skal manipuleres.

Underegenskaper

  • animation-name: erklærer navnet på @keyframesat-rule å manipulere.
  • animation-duration: hvor lang tid det tar for en animasjon å fullføre en syklus.
  • animation-timing-function: oppretter forhåndsinnstilte akselerasjonskurver som easeeller linear.
  • animation-delay: tiden mellom elementet som lastes og starten på animasjonssekvensen (kule eksempler).
  • animation-direction: angir retningen til animasjonen etter syklusen. Standard tilbakestilles for hver syklus.
  • animation-iteration-count: antall ganger animasjonen skal utføres.
  • animation-fill-mode: angir hvilke verdier som skal brukes før / etter animasjonen.
    For eksempel kan du stille den siste tilstanden til animasjonen som skal forbli på skjermen, eller du kan stille den til å bytte tilbake til før animasjonen startet.
  • animation-play-state: pause / spill av animasjonen.

Disse underegenskapene kan da brukes slik:

@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; )

Her er en full liste over hvilke verdier hver av disse underegenskapene kan ta:

animation-timing-function lette, lette ut, lette inn, lette inn, lineære, kubiske bezier (x1, y1, x2, y2) (f.eks. kubiske 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 fremover, bakover, begge, ingen
animation-direction normal, alternativ
animation-play-state pause, løper, løper

Flere trinn

Hvis en animasjon har de samme start- og sluttegenskapene, er det nyttig å kommaseparere verdiene 0% og 100% inni @keyframes:

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

Flere animasjoner

Du kan kommaseparere verdiene for å erklære flere animasjoner på en velger også. I eksemplet nedenfor ønsker vi å endre fargen på sirkelen @keyframesamtidig som den skyves fra side til side med en annen.

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

Opptreden

Å animere de fleste eiendommer er et ytelsesanliggende, så vi bør fortsette med forsiktighet før vi animerer noen eiendom. Imidlertid er det visse kombinasjoner som kan animeres trygt:

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

Hvilke egenskaper kan animeres?

MDN har en liste over CSS-egenskaper som kan animeres. Animasjonsegenskaper har en tendens til farger og tall. Et eksempel på en ikke-animerbar eiendom er background-image.

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 *

Mer informasjon

  • animasjon på MDN
  • Bruker CSS-animasjoner
  • animasjon på W3C
  • Jank busting for bedre gjengivelsesytelse
  • Nettanimasjon på jobben
  • Fem måter å animere ansvarlig på
  • State Jumping, Negative Delays, Animating Origin, and More
  • Starter CSS-animasjoner midtveis
  • Animasjoner med høy ytelse