Animacija - CSS-gudrybės

Anonim

animationCSS turtas gali būti naudojamas animuoti daugelio kitų CSS savybes, tokias kaip color, background-color, heightarba width. Kiekvieną animaciją reikia apibrėžti pagal @keyframestaisyklę, kuri tada vadinama animationsavybe, taip:

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

Kiekviena @keyframestaisyklė apibrėžia, kas turėtų atsitikti tam tikrais animacijos momentais. Pvz., 0% yra animacijos pradžia, o 100% - pabaiga. Tuomet šiuos raktinius kadrus galima valdyti arba stenografijos ypatybe animation, arba aštuoniomis jos ypatybėmis, kad būtų galima geriau valdyti, kaip tais raktiniais kadrais reikia manipuliuoti.

Papildomos savybės

  • animation-name: deklaruoja @keyframestaisyklės taisyklę, kuria reikia manipuliuoti.
  • animation-duration: kiek laiko animacija užbaigia vieną ciklą.
  • animation-timing-function: nustato iš anksto nustatytas pagreičio kreives, tokias kaip easearba linear.
  • animation-delay: laikas nuo elemento įkėlimo iki animacijos sekos pradžios (šaunūs pavyzdžiai).
  • animation-direction: nustato animacijos kryptį po ciklo. Numatytasis nustatymas nustatomas kiekviename cikle.
  • animation-iteration-count: animacijos atlikimo kartų skaičius.
  • animation-fill-mode: nustato, kurios reikšmės taikomos prieš / po animacijos.
    Pvz., Galite nustatyti, kad paskutinė animacijos būsena liktų ekrane, arba galite nustatyti, kad ji vėl būtų įjungta prieš pradedant animaciją.
  • animation-play-state: pristabdykite / paleiskite animaciją.

Tada šias sub savybes galima naudoti taip:

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

Čia pateikiamas visas sąrašas, kurį reikšmes gali turėti kiekviena iš šių sub-ypatybių:

animation-timing-function lengvumas, palengvinimas, palengvinimas, palengvinimas, išvedimas, linijinis, kubinis apvadas (x1, y1, x2, y2) (pvz., kubinis bezierius (0,5, 0,2, 0,3, 1,0))
animation-duration Xs arba Xms
animation-delay Xs arba Xms
animation-iteration-count X
animation-fill-mode pirmyn, atgal, abu, niekas
animation-direction normalus, pakaitinis
animation-play-state pristabdyta, bėga, bėga

Keli žingsniai

Jei animacija turi tas pačias pradžios ir pabaigos savybes, naudinga kableliais atskirti 0% ir 100% reikšmes viduje @keyframes:

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

Keli animacijos

Galite atskirti reikšmes kableliais, kad pasirinktuve taip pat būtų deklaruojamos kelios animacijos. Toliau pateiktame pavyzdyje mes norime pakeisti apskritimo spalvą, @keyframetuo pačiu metu stumdami jį iš vienos pusės į kitą.

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

Spektaklis

Daugumos savybių animavimas kelia susirūpinimą dėl našumo, todėl prieš animuodami kokią nors nuosavybę turėtume elgtis atsargiai. Tačiau yra tam tikrų derinių, kuriuos galima saugiai animuoti:

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

Kurias savybes galima animuoti?

MDN turi CSS ypatybių, kurias galima animuoti, sąrašą. Animatinės savybės linkusios į spalvas ir skaičius. Neapsaugotos nuosavybės pavyzdys yra background-image.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
4 * 5 * 10 12 5,1 *

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 4 * 6,0–6,1 *

Daugiau informacijos

  • animacija MDN
  • CSS animacijų naudojimas
  • animacija W3C
  • „Jank“ išmušimas siekiant geresnio atvaizdavimo našumo
  • Interneto animacija darbe
  • Penki būdai atsakingai animuotis
  • Valstybinis šuolis, neigiamas vėlavimas, kilmės animavimas ir dar daugiau
  • Pusiaukelėje pradedama CSS animacija
  • Aukšto našumo animacijos