Animatsioon - CSS-trikid

Lang L: none (table-of-contents)

animationVara CSS saab animeerida paljud teised CSS omadused nagu color, background-color, height, või width. Iga animatsioon tuleb määratleda @keyframesreegliga at, mida seejärel kutsutakse animationatribuudiga, näiteks:

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

Iga @keyframesreegel määrab kindlaks, mis peaks animatsiooni ajal konkreetsetel hetkedel juhtuma. Näiteks 0% on animatsiooni algus ja 100% lõpp. Neid võtmekaadreid saab seejärel juhtida kas lühikese animationomaduse või selle kaheksa alaomaduse abil, et anda rohkem kontrolli nende võtmekaadrite käsitsemise üle.

Alamomadused

  • animation-name: kuulutab @keyframesmanipuleeritava reegli nime .
  • animation-duration: animatsiooni ühe tsükli lõpuleviimiseks kuluv aeg.
  • animation-timing-function: loob eelseadistatud kiirenduskõverad nagu easevõi linear.
  • animation-delay: aeg elemendi laadimise ja animatsioonisarja alguse vahel (lahedad näited).
  • animation-direction: määrab animatsiooni suuna pärast tsüklit. Selle vaikeseaded lähtestatakse igas tsüklis.
  • animation-iteration-count: animatsiooni sooritamise kordade arv.
  • animation-fill-mode: määrab, milliseid väärtusi rakendatakse enne / pärast animatsiooni.
    Näiteks võite seada animatsiooni viimase oleku ekraanil püsimiseks või selle, et see lülituks tagasi enne animatsiooni algust.
  • animation-play-state: animatsiooni peatamine / esitamine.

Neid alamomadusi saab seejärel kasutada järgmiselt:

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

Siin on täielik loetelu, milliseid väärtusi võib kumbki neist atribuutidest võtta:

animation-timing-function lihtsus, kergendus, hõlpsus sisse, hõlpsasti sisse, lineaarne, kuupbezier (x1, y1, x2, y2) (nt kuupbezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs või Xms
animation-delay Xs või Xms
animation-iteration-count X
animation-fill-mode edasi, tahapoole, mõlemad, mitte ühtegi
animation-direction tavaline, asendusliige
animation-play-state paus, jooksmine, jooksmine

Mitu sammu

Kui animatsioonil on samad algus- ja lõppomadused, on kasulik eraldada komades 0% ja 100% väärtused koma abil @keyframes:

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

Mitu animatsiooni

Mitme animatsiooni deklareerimiseks valijas saate väärtused komaga eraldada. Allpool toodud näites soovime muuta ringi värvi @keyframeüheaegselt, samal ajal nihutades seda ka küljelt teisele.

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

Performance

Enamiku omaduste animeerimine on toimivusprobleem, seega peaksime enne mis tahes vara animeerimist olema ettevaatlik. Siiski on teatud kombinatsioone, mida saab ohutult animeerida:

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

Milliseid omadusi saab animeerida?

MDN-is on loend CSS-i omadustest, mida saab animeerida. Animeeritavad omadused kalduvad värvide ja arvude järgi. Mitte-animeeritav atribuut on background-image.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
4 * 5 * 10 12 5,1 *

Mobiil / tahvelarvuti

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

Rohkem informatsiooni

  • animatsioon MDN-is
  • CSS-animatsioonide kasutamine
  • animatsioon W3C-s
  • Tank puruneb parema renderduse saavutamiseks
  • Veebianimatsioon tööl
  • Viis võimalust vastutustundlikuks animeerimiseks
  • Riigi hüpped, negatiivsed viivitused, päritolu animeerimine ja palju muud
  • CSS-animatsioonide alustamine keskel
  • Suure jõudlusega animatsioonid

Huvitavad Artiklid...