Animaatio - CSS-temppuja

Anonim

animationOmaisuus CSS voidaan elollinen monia muita CSS-ominaisuuksia, kuten color, background-color, height, tai width. Jokainen animaatio on määriteltävä @keyframesat-säännöllä, jota kutsutaan sitten animationominaisuudella, kuten:

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

Kukin @keyframessääntö määrittää, mitä pitäisi tapahtua animaation aikana tietyissä hetkissä. Esimerkiksi 0% on animaation alku ja 100% loppu. Näitä avainkehyksiä voidaan sitten ohjata joko pikakirjoitusominaisuudella animationtai sen kahdeksalla aliominaisuudella, jotta voidaan paremmin hallita sitä, kuinka näitä avainkehyksiä tulisi käsitellä.

Alaominaisuudet

  • animation-name: julistaa @keyframesmanipuloitavan at-säännön nimen .
  • animation-duration: kuinka kauan animaatio kestää yhden jakson.
  • animation-timing-function: määrittää ennalta asetetut kiihtyvyyskäyrät, kuten easetai linear.
  • animation-delay: aika ladattavan elementin ja animaatiojakson aloittamisen välillä (hienoja esimerkkejä).
  • animation-direction: määrittää animaation suunnan jakson jälkeen. Sen oletusasetukset palautetaan kullekin jaksolle.
  • animation-iteration-count: kuinka monta kertaa animaatio tulisi suorittaa.
  • animation-fill-mode: määrittää, mitkä arvot käytetään ennen animaatiota / sen jälkeen.
    Voit esimerkiksi asettaa animaation viimeisen tilan pysymään näytöllä tai voit asettaa sen vaihtamaan takaisin ennen animaation alkua.
  • animation-play-state: keskeytä / toista animaatio.

Näitä aliominaisuuksia voidaan sitten käyttää samalla tavalla:

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

Tässä on täydellinen luettelo arvoista, joita kukin näistä aliominaisuuksista voi saada:

animation-timing-function helppous, helppokäyttöisyys, helppokäyttöisyys, sisäänsyöttö, lineaarinen, kuutio-bezier (x1, y1, x2, y2) (esim. kuutio-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration X tai Xms
animation-delay X tai Xms
animation-iteration-count X
animation-fill-mode eteenpäin, taaksepäin, molemmat, ei ketään
animation-direction normaali, varajäsen
animation-play-state tauko, juoksu, juoksu

Useita vaiheita

Jos animaatiolla on samat alku- ja loppuominaisuudet, on hyödyllistä erottaa pilkulla 0% ja 100% @keyframes:

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

Useita animaatioita

Voit erottaa arvot pilkulla erottaaksesi useita animaatioita myös valitsimessa. Alla olevassa esimerkissä haluamme muuttaa ympyrän väriä @keyframesamalla, kun työntämme sitä myös sivulta toiselle.

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

Esitys

Suurimman osan ominaisuuksien animointi on suorituskykyä koskeva huolenaihe, joten meidän on toimittava varoen ennen minkä tahansa kohteen animointia. On kuitenkin olemassa tiettyjä yhdistelmiä, jotka voidaan animoida turvallisesti:

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

Mitkä ominaisuudet voidaan animoida?

MDN: llä on luettelo CSS-ominaisuuksista, jotka voidaan animoida. Animatisoituvat ominaisuudet pyrkivät väreihin ja numeroihin. Esimerkki ominaisuudesta, jota ei voida animoida background-image.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
4 * 5 * 10 12 5,1 *

Matkapuhelin / tabletti

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

Lisää tietoa

  • animaatio MDN: ssä
  • CSS-animaatioiden käyttäminen
  • animaatio W3C: ssä
  • Tankki rikkoo paremman renderoinnin
  • Verkkoanimaatio työssä
  • Viisi tapaa animoida vastuullisesti
  • Valtion hyppy, negatiiviset viivästykset, alkuperän animointi ja paljon muuta
  • Aloitetaan CSS-animaatiot puolivälissä
  • Tehokkaat animaatiot