Animacija - CSS-trikovi

Anonim

animationNekretnina u CSS može koristiti za animirati brojnim drugim svojstvima CSS, kao što su color, background-color, height, ili width. Svaka animacija mora biti definirana @keyframespravilom at koje se zatim poziva sa animationsvojstvom, i to na sljedeći način:

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

Svako @keyframespravilo definira što bi se trebalo dogoditi u određenim trenucima tijekom animacije. Na primjer, 0% je početak animacije, a 100% kraj. Ovim ključnim kadrovima tada se može upravljati ili skraćenim animationsvojstvom, ili njegovih osam pod-svojstava, kako bi se pružila veća kontrola nad načinom na koji tim ključnim okvirima treba manipulirati.

Pod-svojstva

  • animation-name: izjavljuje naziv @keyframespravila kojim se manipulira.
  • animation-duration: vrijeme potrebno animaciji da završi jedan ciklus.
  • animation-timing-function: uspostavlja unaprijed zadane krivulje ubrzanja kao što su easeili linear.
  • animation-delay: vrijeme između elementa koji se učitava i početka sekvence animacije (super primjeri).
  • animation-direction: postavlja smjer animacije nakon ciklusa. Njegova se zadana vrijednost resetira za svaki ciklus.
  • animation-iteration-count: koliko bi puta animacija trebala biti izvedena.
  • animation-fill-mode: postavlja vrijednosti koje se primjenjuju prije / nakon animacije.
    Na primjer, možete postaviti da posljednje stanje animacije ostane na ekranu ili možete postaviti da se vrati natrag prije početka animacije.
  • animation-play-state: pauza / reprodukcija animacije.

Ta se svojstva tada mogu koristiti na sljedeći način:

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

Evo cjelovitog popisa vrijednosti koje može imati svako od ovih svojstava:

animation-timing-function lakoća, lakoća, lakoća ulaska, lakoća izlaska, linearna, kubni-bezier (x1, y1, x2, y2) (npr. kubni-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration X ili Xms
animation-delay X ili Xms
animation-iteration-count x
animation-fill-mode naprijed, natrag, oboje, nema
animation-direction normalno, naizmjenično
animation-play-state zastao, trči, trči

Više koraka

Ako animacija ima ista svojstva početka i završetka, korisno je razdvojiti zarezom vrijednosti 0% i 100% unutar @keyframes:

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

Višestruke animacije

Vrijednosti možete razdvojiti zarezom kako biste na selektoru deklarirali i više animacija. U donjem primjeru želimo promijeniti boju kruga @keyframeistovremeno gurajući je s jedne strane na drugu.

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

Izvođenje

Animiranje većine svojstava predstavlja zabrinutost zbog izvedbe, pa bismo trebali nastaviti s oprezom prije animiranja bilo kojeg svojstva. Međutim, postoje određene kombinacije koje se mogu sigurno animirati:

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

Koja svojstva se mogu animirati?

MDN ima popis CSS svojstava koja se mogu animirati. Animirana svojstva teže bojama i brojevima. Primjer ne animacijskog svojstva je background-image.

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 informacija

  • animacija na MDN-u
  • Korištenje CSS animacija
  • animacija na W3C
  • Propadanje Jenka za bolje izvedbe prikazivanja
  • Web animacija na poslu
  • Pet načina za odgovorno animiranje
  • Državni skokovi, negativna kašnjenja, životinjsko podrijetlo i još mnogo toga
  • Pokretanje CSS animacija na pola puta
  • Animacije visokih performansi