Siirtymäviive - CSS-temppuja | CSS-almanakka 2025

transition-delayOminaisuus, jota käytetään tavallisesti osana transitionpika, käytetään määrittämään aika viivyttää alkua siirtymän.

.delay-me ( transition-delay: 0.25s; )

Arvo voi olla jokin seuraavista:

Kelvollinen aika-arvo, joka määritetään sekunteina tai millisekunteina, esim. 1.3sTai125ms
Pilkulla erotettu luettelo aika-arvoista erillisten viivearvojen määrittelemiseksi useille siirtymille yhdelle elementille esim 1s background-color, 350ms transform

Oletusarvo transition-delayon 0s, mikä tarkoittaa, että viivettä ei tapahdu ja siirtyminen alkaa tapahtua välittömästi. Aika-arvo voidaan ilmaista desimaalilukuna tarkempaa ajoitusta varten.

Kun siirtymällä on negatiivinen viivearvo, se saa siirtymän alkamaan välittömästi (ilman viivettä), mutta siirtymä alkaa prosessin puolivälissä, ikään kuin se olisi jo alkanut.

Seuraava kynä näyttää hiiren vaikutuksen ruutuun, joka käyttää transition-delayarvoa 2sja jonka siirtymäaika on 1s:

Katso
CSS-
Tricksin kynänsiirtoviiveen esittely (@ css-tricks) CodePenistä.

Vertaa nyt seuraavaan esittelyyn, jonka viive -1sja kesto ovat 3s:

Katso
CSS-Tricks (@ css-tricks) -kynän negatiivisen siirtymäviiveen esittely
CodePenistä.

Huomaa, että toisessa esimerkissä vain viimeiset kaksi kolmasosaa todellisesta siirtymästä ovat näkyvissä eikä viivettä ole. Negatiivinen arvo poistaa viiveen ja lyhentää tehokkaasti kestoa.

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

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

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

Yleinen käyttötapaus on siirtymien porrastaminen:

Katso
Chris Coyierin (@chriscoyier) kynän porrastetut animaatiot
CodePenistä.

Selaimen tuki

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