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

bookOikeiden Siirtymäominaisuuksien Valitseminen

Voimme määrittää minkä tahansa CSS-ominaisuuden arvoksi transition-property -ominaisuudelle. Tämä tarkoittaa, että voimme käyttää siirtymäefektiä mihin tahansa ominaisuuteen.

transition-property: ... /* any property */

Käsitellään muutamia tyypillisiä ominaisuuksia, joihin siirtymiä käytetään. Ominaisuudet transition-duration, transition-timing-function ja transition-delay pysyvät aina samoina. Kaikki siirtymät reagoivat kohdistimen hover-tilaan.

index.html

index.html

index.css

index.css

copy

Useita siirtymäominaisuuksia

Voimme myös käyttää arvoa all ominaisuudelle transition-property, mikä tarkoittaa, että kaikki ominaisuudet siirtyvät.

transition-property: all;

Seuraavassa esimerkissä haluamme siirtää background-color-, color-, font-weight- ja font-size-ominaisuuksien muutokset. Tarkastellaan index.css-tiedostoa:

index.html

index.html

index.css

index.css

copy

Lisäksi, jos haluamme lisätä siirtymän useisiin ominaisuuksiin, mutta emme kaikkiin, voimme määrittää ne arvoksi transition-property -ominaisuudelle, erottaen ne välilyönnillä. Esimerkiksi:

transition-property: color border height;

Tämä tarkoittaa, että siirtymä koskee color-, border- ja height-ominaisuuksia.

question mark

Mitä transition-property -ominaisuus määrittää?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 2

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

bookOikeiden Siirtymäominaisuuksien Valitseminen

Pyyhkäise näyttääksesi valikon

Voimme määrittää minkä tahansa CSS-ominaisuuden arvoksi transition-property -ominaisuudelle. Tämä tarkoittaa, että voimme käyttää siirtymäefektiä mihin tahansa ominaisuuteen.

transition-property: ... /* any property */

Käsitellään muutamia tyypillisiä ominaisuuksia, joihin siirtymiä käytetään. Ominaisuudet transition-duration, transition-timing-function ja transition-delay pysyvät aina samoina. Kaikki siirtymät reagoivat kohdistimen hover-tilaan.

index.html

index.html

index.css

index.css

copy

Useita siirtymäominaisuuksia

Voimme myös käyttää arvoa all ominaisuudelle transition-property, mikä tarkoittaa, että kaikki ominaisuudet siirtyvät.

transition-property: all;

Seuraavassa esimerkissä haluamme siirtää background-color-, color-, font-weight- ja font-size-ominaisuuksien muutokset. Tarkastellaan index.css-tiedostoa:

index.html

index.html

index.css

index.css

copy

Lisäksi, jos haluamme lisätä siirtymän useisiin ominaisuuksiin, mutta emme kaikkiin, voimme määrittää ne arvoksi transition-property -ominaisuudelle, erottaen ne välilyönnillä. Esimerkiksi:

transition-property: color border height;

Tämä tarkoittaa, että siirtymä koskee color-, border- ja height-ominaisuuksia.

question mark

Mitä transition-property -ominaisuus määrittää?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 2
some-alt