Animation - CSS-tricks

Anonim

Den animationejendom i CSS kan bruges til at animere mange andre CSS egenskaber såsom color, background-color, height, eller width. Hver animation skal defineres med at @keyframes-reglen, som derefter kaldes med animationejendommen, som sådan:

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

Hver @keyframesat-regel definerer hvad der skal ske på bestemte øjeblikke under animationen. For eksempel er 0% begyndelsen på animationen og 100% er slutningen. Disse nøglerammer kan derefter styres af enten stenografiegenskaben animationeller dens otte underegenskaber for at give mere kontrol over, hvordan disse nøglerammer skal manipuleres.

Underejendomme

  • animation-name: erklærer navnet på at @keyframes-reglen, der skal manipuleres.
  • animation-duration: hvor lang tid det tager for en animation at gennemføre en cyklus.
  • animation-timing-function: opretter forudindstillede accelerationskurver som easeeller linear.
  • animation-delay: tiden mellem elementet, der indlæses, og starten af ​​animationssekvensen (seje eksempler).
  • animation-direction: indstiller retningen for animationen efter cyklussen. Dens standard nulstilles for hver cyklus.
  • animation-iteration-count: det antal gange, animationen skal udføres.
  • animation-fill-mode: indstiller, hvilke værdier der skal anvendes før / efter animationen.
    For eksempel kan du indstille den sidste tilstand for animationen, der skal forblive på skærmen, eller du kan indstille den til at skifte tilbage til, før animationen startede.
  • animation-play-state: pause / afspil animationen.

Disse underegenskaber kan derefter bruges som sådan:

@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 komplet liste over hvilke værdier hver af disse underegenskaber kan tage:

animation-timing-function let, let ud, let ind, let ind, lineært, kubisk-bezier (x1, y1, x2, y2) (f.eks. 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 fremad, bagud, begge, ingen
animation-direction normal, alternativ
animation-play-state pause, løber, løber

Flere trin

Hvis en animation har de samme egenskaber for start og slutning, er det nyttigt at kommaseparere værdierne 0% og 100% indeni @keyframes:

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

Flere animationer

Du kan kommaseparere værdierne for også at erklære flere animationer på en vælger. I eksemplet nedenfor ønsker vi at ændre cirklens farve i en @keyframesamtidig skubbe den fra side til side med en anden.

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

Ydeevne

Animering af de fleste ejendomme er en ydeevnehensyn, så vi skal gå med forsigtighed, inden vi animerer nogen ejendom. Der er dog visse kombinationer, der kan animeres sikkert:

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

Hvilke egenskaber kan animeres?

MDN har en liste over CSS-egenskaber, som kan animeres. Animerbare egenskaber har tendens til farver og tal. Et eksempel på en ejendom, der ikke kan animeres, er background-image.

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 *

Mere information

  • animation på MDN
  • Brug af CSS-animationer
  • animation på W3C
  • Jank busting for bedre gengivelse ydeevne
  • Webanimation på arbejde
  • Fem måder at animere ansvarligt på
  • Statsspring, negative forsinkelser, animering af oprindelse og mere
  • Starter CSS-animationer midtvejs
  • Højtydende animationer