Oikeiden 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.css
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.css
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.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.04
Oikeiden 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.css
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.css
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.
Kiitos palautteestasi!