Animácia - Triky CSS

Anonim

animationVlastnosť CSS možno použiť k animácii mnohých ďalších CSS vlastností, ako color, background-color, height, alebo width. Každá animácia musí byť definovaná pomocou @keyframesat-pravidla, ktoré sa potom vyvolá s animationvlastnosťou, napríklad takto:

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

Každé @keyframespravidlo určuje, čo by sa malo stať v konkrétnych momentoch počas animácie. Napríklad 0% je začiatok animácie a 100% je koniec. Tieto kľúčové snímky možno potom ovládať buď vlastnosťou skratky animation, alebo ich ôsmimi podvlastnosťami, aby sa získala väčšia kontrola nad tým, ako by sa s týmito kľúčovými snímkami malo manipulovať.

Čiastkové vlastnosti

  • animation-name: deklaruje názov @keyframespravidla, s ktorým sa má manipulovať.
  • animation-duration: čas, ktorý trvá, kým animácia dokončí jeden cyklus.
  • animation-timing-function: vytvára prednastavené krivky zrýchlenia ako easealebo linear.
  • animation-delay: čas medzi načítaným prvkom a začiatkom animačnej sekvencie (vynikajúce príklady).
  • animation-direction: nastavuje smer animácie po cykle. Jeho predvolené nastavenie sa obnovuje pri každom cykle.
  • animation-iteration-count: počet uskutočnení animácie.
  • animation-fill-mode: nastavuje, ktoré hodnoty sa použijú pred / po animácii.
    Môžete napríklad nastaviť, aby posledný stav animácie zostal na obrazovke, alebo môžete prepnúť späť na pred začiatkom animácie.
  • animation-play-state: pozastaviť / prehrať animáciu.

Tieto čiastkové vlastnosti možno potom použiť takto:

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

Tu je úplný zoznam toho, ktoré hodnoty môžu mať jednotlivé z týchto čiastkových vlastností:

animation-timing-function ľahkosť, ľahkosť von, ľahkosť dovnútra, ľahkosť von, lineárny, kubický Bézier (x1, y1, x2, y2) (napr. kubický Bézier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs alebo Xms
animation-delay Xs alebo Xms
animation-iteration-count X
animation-fill-mode dopredu, dozadu, obaja, žiadny
animation-direction normálne, alternatívne
animation-play-state pozastavený, bežiaci, bežiaci

Viaceré kroky

Ak má animácia rovnaké počiatočné a koncové vlastnosti, je užitočné oddeliť čiarkou hodnoty 0% a 100% vo vnútri @keyframes:

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

Viac animácií

Hodnoty môžete oddeliť čiarkou a deklarovať tiež viac animácií na selektore. V príklade nižšie chceme zmeniť farbu kruhu a @keyframezároveň ho postrkávať zo strany na stranu inou.

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

Výkon

Animácia väčšiny vlastností je problémom výkonu, preto by sme mali pred animáciou akejkoľvek vlastnosti postupovať opatrne. Existujú však určité kombinácie, ktoré je možné bezpečne animovať:

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

Ktoré vlastnosti je možné animovať?

MDN obsahuje zoznam vlastností CSS, ktoré je možné animovať. Animovateľné vlastnosti majú sklon k farbám a číslam. Príkladom neanimovateľnej vlastnosti je background-image.

Podpora prehliadača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

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

Mobil / tablet

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

Viac informácií

  • animácia na MDN
  • Používanie animácií CSS
  • animácia na W3C
  • Jank mlátenie pre lepší výkon vykreslenia
  • Webová animácia v práci
  • Päť spôsobov, ako zodpovedne animovať
  • Stavové skoky, negatívne oneskorenia, oživenie pôvodu a ďalšie
  • V polovici cesty sa spúšťajú animácie CSS
  • Vysoko výkonné animácie