Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Useiden Animaatioiden Yhdistäminen | Edistyneet CSS-animaatiot
Edistyneet CSS-tekniikat

bookUseiden 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.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 5

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookUseiden 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.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 5
some-alt