Useiden Animaatioiden Yhdistäminen
Voimme käyttää lyhytmuotoista tapaa määrittää kaikki animaatio-ominaisuudet. Syntaksi on seuraava:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Kirjoitetaan seuraavat ominaisuudet tiiviisti uudelleen.
Pitkä tapa
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Lyhytmuoto
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Tämä näyttää sekavalta, ja jonkin arvon voi helposti unohtaa. Meillä on kuitenkin tällainen mahdollisuus käytettävissä.
Huomio
Selaimen kannalta ei ole eroa, käytetäänkö animaation määrittelyssä lyhytmuotoa vai pitkää tapaa.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain what each value in the shorthand means?
Are there any best practices for using the shorthand animation property?
What happens if I omit some values in the shorthand?
Mahtavaa!
Completion arvosana parantunut arvoon 2.08Useiden Animaatioiden Yhdistäminen
Pyyhkäise näyttääksesi valikon
Voimme käyttää lyhytmuotoista tapaa määrittää kaikki animaatio-ominaisuudet. Syntaksi on seuraava:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Kirjoitetaan seuraavat ominaisuudet tiiviisti uudelleen.
Pitkä tapa
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Lyhytmuoto
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Tämä näyttää sekavalta, ja jonkin arvon voi helposti unohtaa. Meillä on kuitenkin tällainen mahdollisuus käytettävissä.
Huomio
Selaimen kannalta ei ole eroa, käytetäänkö animaation määrittelyssä lyhytmuotoa vai pitkää tapaa.
Kiitos palautteestasi!
