Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Siirtymien Yhdistäminen | Sulavien Siirtymien Luominen CSS:llä
Edistyneet CSS-tekniikat

bookSiirtymien Yhdistäminen

Voimme yhdistää kaikki siirtymään liittyvät ominaisuudet yhdelle riville.

transition: <property> <time> <time_function> <delay>;

Kuvitellaan, että meidän täytyy lisätä transition-ominaisuus elementtiin. Odotamme:

  • background-color-ominaisuuden muutosta;
  • keston olevan 1.2s;
  • aikafunktion olevan ease-in-out;
  • viiveen olevan 250ms.

Pitkä muoto

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Lyhyt muoto

transition: background-color 1200ms ease-in-out 250ms;

Huomio

Selaimen kannalta syntaksissa ei ole eroa. Voimme valita minkä tahansa vaihtoehdon, josta pidämme enemmän.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6

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

bookSiirtymien Yhdistäminen

Pyyhkäise näyttääksesi valikon

Voimme yhdistää kaikki siirtymään liittyvät ominaisuudet yhdelle riville.

transition: <property> <time> <time_function> <delay>;

Kuvitellaan, että meidän täytyy lisätä transition-ominaisuus elementtiin. Odotamme:

  • background-color-ominaisuuden muutosta;
  • keston olevan 1.2s;
  • aikafunktion olevan ease-in-out;
  • viiveen olevan 250ms.

Pitkä muoto

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Lyhyt muoto

transition: background-color 1200ms ease-in-out 250ms;

Huomio

Selaimen kannalta syntaksissa ei ole eroa. Voimme valita minkä tahansa vaihtoehdon, josta pidämme enemmän.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6
some-alt