Sintaksa animacije ključnog okvira - CSS-trikovi

Anonim

Osnovna deklaracija i upotreba

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

Radi kratkoće, ostatak koda na ovoj stranici neće koristiti prefikse, ali stvarna bi upotreba trebala koristiti sve prefikse dobavljača odozgo

Više koraka

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

Ako animacija ima ista svojstva početka i završetka, jedan od načina to je razdvajanje zarezom vrijednosti 0% i 100%:

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

Ili, uvijek možete reći animaciji da se pokrene dva puta (ili bilo koji paran broj puta) i reći smjer alternate.

Pozivanje animacije ključnog kadra s odvojenim svojstvima

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

Stenografija animacije

Samo odvojite razmakom sve pojedinačne vrijednosti. Redoslijed nije važan, osim kada se koriste i trajanje i kašnjenje, oni moraju biti tim redoslijedom. U primjeru ispod 1s = trajanje, 2s = kašnjenje, 3 = ponavljanje.

animation: test 1s 2s 3 alternate backwards

Kombinirajte transformaciju i animaciju

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

Višestruke animacije

Vrijednosti možete razdvojiti zarezom da biste na selektoru deklarirali više animacija.

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

Koraci ()

Funkcija steps () kontrolira točno koliko će se ključnih okvira prikazati u vremenskom okviru animacije. Recimo da izjavite:

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

Ako u animaciji koristite korake (10), pobrinut će se da se samo 10 ključnih okvira dogodi u zadanom vremenu.

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

Matematika tamo lijepo uspijeva. Svake sekunde element će se pomicati 10px ulijevo i 10px prema dolje, do kraja animacije, a zatim zauvijek unatrag.

Ovo može biti izvrsno za spritesheet animaciju poput ove demonstracije simuraija.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

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

Mobitel / tablet

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

Više resursa

  • MDN dokumenti
  • MDN: Korištenje CSS animacije
  • Mogu li koristiti - podrška za preglednik
  • VIDEO: Uvod u CSS animacije