Avainkehyksen animaation syntakse - CSS-temppuja

Anonim

Perusilmoitus ja käyttö

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Lyhyyden vuoksi tämän sivun muu koodi ei käytä etuliitteitä, mutta todellisessa käytössä tulisi käyttää kaikkia toimittajan etuliitteitä ylhäältä

Useita vaiheita

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Jos animaatiolla on samat alku- ja loppuominaisuudet, yksi tapa tehdä se on erottaa pilkulla 0% ja 100%:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Tai voit aina kertoa animaatiolle, että se suoritetaan kahdesti (tai mikä tahansa parillinen määrä kertoja) ja kerro suunta alternate.

Avainkehysanimaation kutsuminen erillisillä ominaisuuksilla

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Animaatio Lyhyt

Erottele kaikki yksittäiset arvot vain välilyönnillä. Tilauksella ei ole merkitystä paitsi käytettäessä sekä kestoa että viivettä, niiden on oltava siinä järjestyksessä. Alla olevassa esimerkissä 1s = kesto, 2s = viive, 3 = iteraatiot.

animation: test 1s 2s 3 alternate backwards

Yhdistä muunnos ja animaatio

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Useita animaatioita

Voit erottaa arvot pilkuilla erottaaksesi useita animaatioita valitsimessa.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Askeleet()

Vaihe () -toiminto ohjaa tarkalleen kuinka monta avainkehystä renderoidaan animaation aikakehyksessä. Oletetaan, että ilmoitat:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Jos käytät animaatiossa vaiheita (10), se varmistaa, että vain 10 avainkehystä tapahtuu määrätyssä ajassa.

.move ( animation: move 10s steps(10) infinite alternate; )

Matematiikka sujuu siellä hienosti. Joka toinen sekunti elementti liikkuu 10 kuvapistettä vasemmalle ja 10 kuvapistettä alaspäin animaation loppuun saakka ja sitten takaisin ikuisesti.

Tämä voi olla hieno spritesheet-animaatioon, kuten tämä simurain esittely.

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ää resursseja

  • MDN-dokumentit
  • MDN: CSS-animaation käyttö
  • Voinko käyttää - Selaintuki
  • VIDEO: CSS-animaatioiden esittely