Sintaksa animacije ključnega okvira - CSS-triki

Anonim

Osnovna izjava in uporaba

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

Zaradi kratkosti preostala koda na tej strani ne bo uporabljala nobenih predpon, v resnični uporabi pa bi morali uporabljati vse predpone prodajalcev od zgoraj

Več korakov

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

Če ima animacija enake začetne in končne lastnosti, lahko en način ločimo z vrednostmi 0% in 100% z vejico:

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

Ali pa lahko vedno rečete animaciji, naj se zažene dvakrat (ali poljubno številokrat) in ji povejte smer alternate.

Klicanje animacije ključnega okvira z ločenimi lastnostmi

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

Okrajšava za animacijo

Samo posamezne vrednosti ločite s presledkom. Vrstni red ni pomemben, razen pri uporabi trajanja in zamude, morajo biti v tem vrstnem redu. V spodnjem primeru 1s = trajanje, 2s = zakasnitev, 3 = ponovitve.

animation: test 1s 2s 3 alternate backwards

Združite preobrazbo in animacijo

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

Več animacij

Vrednosti lahko ločite z vejico, da na izbirniku prijavite več animacij.

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

Koraki ()

Funkcija steps () natančno nadzoruje, koliko ključnih okvirjev bo upodobljenih v časovnem okviru animacije. Recimo, da izjaviš:

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

Če v animaciji uporabite korake (10), bo zagotovilo, da se bo v določenem času zgodilo le 10 ključnih okvirjev.

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

Tam se matematika lepo obnese. Vsako sekundo se bo element premaknil za 10px v levo in 10px navzdol do konca animacije, nato pa za vedno v obratni smeri.

To je lahko super za animacijo spritesheet, kot je ta demo s strani simurai.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
4 * 5 * 10. 12. 5,1 *

Mobilni / tablični računalnik

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

Več virov

  • Dokumenti MDN
  • MDN: Uporaba CSS animacije
  • Ali lahko uporabljam - Podpora za brskalnik
  • VIDEO: Uvod v CSS animacije