Siirtyminen - CSS-temppuja | CSS-almanakka 2025

transitionOminaisuus on lyhenne ominaisuus käytetään edustamaan jopa neljä siirtyminen liittyvät longhand ominaisuudet:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Nämä siirtymisominaisuudet antavat elementtien muuttaa arvoja tietyn keston ajan animoimalla ominaisuusmuutokset sen sijaan, että ne tapahtuvat välittömästi. Tässä on yksinkertainen esimerkki, joka siirtää elementin taustavärin : hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Tuo div kestää puoli sekuntia, kun hiiri on sen päällä, muuttuu punaisesta vihreäksi. Tässä on elävä osoitus tällaisesta siirtymästä:

Katso Louis Lazariksen (@impressivewebs) Pen Transition Demo CodePen -palvelusta.

Voit määrittää tietyn ominaisuuden, kuten meillä on yllä, tai käyttää arvoa "kaikki" viitataksesi siirtymäominaisuuksiin.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

Tässä yllä olevassa esimerkissä sekä tausta että täyte siirtyvät, johtuen transition-propertylyhennyksen osalle määritetystä arvosta "kaikki" .

Voit pilkuttaa erilliset arvojoukot tekemään erilaisia siirtymiä eri ominaisuuksille:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Suurimmaksi osaksi arvojen järjestyksellä ei ole merkitystä - ellei viivettä määritetä. Jos määrität viiveen, sinun on ensin määritettävä kesto. Ensimmäinen arvo, jonka selain tunnistaa kelvolliseksi aika-arvoksi, edustaa aina kestoa. Kaikki myöhemmät kelvolliset aika-arvot jäsennetään viiveinä.

Joitakin ominaisuuksia ei voida siirtää, koska ne eivät ole animoitavia ominaisuuksia. Katso tekniset tiedot täydellisestä luettelosta ominaisuuksista, jotka ovat animoitavissa.

Määrittämällä siirtymän itse elementille määrität siirtymän, joka tapahtuu molempiin suuntiin. Toisin sanoen, kun tyylejä muutetaan (esim. Hiiren päällä), niiden ominaisuudet siirtyvät ja kun tyylit muuttuvat taaksepäin (esim. Hiiren ollessa pois päältä), ne siirtyvät. Esimerkiksi seuraavat esittelysiirtymät leijuvat, mutta eivät leijuvat pois:

Katso Louis Lazariksen (@impressivewebs) Pen zohgt -koodi CodePenistä.

Tämä tapahtuu, koska siirtymä on siirretty :hovertilavalitsimeen ja valitsimessa ei ole vastaavaa siirtymää, joka kohdistaa elementin suoraan ilman :hovertilaa.

Yhteensopivuuden takaamiseksi kaikissa tukevissa selaimissa tarvitaan toimittajan etuliitteet, ja vakiosyntaksi on julistettu viimeiseksi:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (IE: n ensimmäinen tukeva vakaa versio transition) ei vaadi -ms-etuliitettä.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.