Animace - Triky CSS

Anonim

animationVlastnost CSS lze použít k animaci mnoha dalších CSS vlastností, jako color, background-color, height, nebo width. Každá animace musí být definována pomocí @keyframesat-pravidla, které je poté voláno s animationvlastností, například takto:

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

Každé @keyframespravidlo určuje, co by se mělo stát v určitých okamžicích během animace. Například 0% je začátek animace a 100% je konec. Tyto klíčové snímky lze poté ovládat buď zkratkovou animationvlastností, nebo jejími osmi podvlastnostmi, aby se získala větší kontrola nad tím, jak by se s těmito klíčovými snímky mělo manipulovat.

Dílčí vlastnosti

  • animation-name: deklaruje název @keyframesat-pravidla, se kterým se má manipulovat.
  • animation-duration: doba, za kterou animace dokončí jeden cyklus.
  • animation-timing-function: vytvoří přednastavené křivky zrychlení jako easenebo linear.
  • animation-delay: čas mezi načítaným prvkem a začátkem sekvence animace (skvělé příklady).
  • animation-direction: nastavuje směr animace po cyklu. Jeho výchozí nastavení se resetuje při každém cyklu.
  • animation-iteration-count: kolikrát by měla být provedena animace.
  • animation-fill-mode: nastaví, které hodnoty se použijí před / po animaci.
    Můžete například nastavit, aby poslední stav animace zůstal na obrazovce, nebo můžete nastavit, aby se přepnul zpět na před začátkem animace.
  • animation-play-state: pozastavit / přehrát animaci.

Tyto dílčí vlastnosti lze poté použít 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; )

Tady je úplný seznam hodnot, které každá z těchto dílčích vlastností může nabývat:

animation-timing-function snadnost, uvolnění, uvolnění, uvolnění, lineární, kubický bezier (x1, y1, x2, y2) (např. kubický-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs nebo Xms
animation-delay Xs nebo Xms
animation-iteration-count X
animation-fill-mode vpřed, vzad, oba, žádný
animation-direction normální, alternativní
animation-play-state pozastaveno, běh, běh

Několik kroků

Pokud má animace stejné počáteční a koncové vlastnosti, je užitečné oddělit hodnoty 0% a 100% uvnitř @keyframes:

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

Více animací

Hodnoty můžete oddělit čárkami a deklarovat také více animací na selektoru. V níže uvedeném příkladu chceme změnit barvu kruhu a @keyframezároveň jej posunovat ze strany na stranu jinou.

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

Výkon

Animace většiny vlastností se týká výkonu, proto bychom měli před animací jakékoli vlastnosti postupovat opatrně. Existují však určité kombinace, které lze bezpečně animovat:

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

Které vlastnosti lze animovat?

MDN obsahuje seznam vlastností CSS, které lze animovat. Animovatelné vlastnosti mají sklon k barvám a číslům. Příkladem neanimovatelné vlastnosti je background-image.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
4 * 5 * 10 12 5,1 *

Mobilní / Tablet

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

Více informací

  • animace na MDN
  • Používání CSS animací
  • animace na W3C
  • Jank mlácení pro lepší výkon vykreslování
  • Webová animace v práci
  • Pět způsobů, jak zodpovědně animovat
  • Státní skoky, negativní zpoždění, animace původu a další
  • Spouštění animací CSS v polovině cesty
  • Vysoce výkonné animace