CSS transition ominaisuus

Määrittely ja käyttö

transition-ominaisuus on lyhennetty ominaisuus, joka asettaa neljä过渡属性:

Huomautus:Aina aseta transition-duration Jos et aseta ominaisuutta,过渡效果不会产生，否则时长为 0。

Katso myös:

CSS-opas:CSS siirtymä

HTML DOM -viittausopas:transition-ominaisuus

Esimerkki

Kun hiiren osoitin asetetaan div-elementille, sen leveys muuttuu vähitellen 100px:sta 300px:aan:

div {
  width: 100px;
  transition: width 2s;
}

Kokeile itse

CSS-kieli

transition: property duration timing-function delay;

Ominaisuusarvo

Arvo Kuvaus
transition-property Määrittelee CSS-ominaisuuden nimen, jota käytetään过渡效果。
transition-duration Määrittelee, kuinka monta sekuntia tai millisekuntia kestää过渡效果。
transition-timing-function Määrittelee nopeusvaikutuksen nopeuskaaren.
transition-delay Määrittelee, milloin过渡效果开始。

Tekninen yksityiskohta

Oletusarvo: all 0 ease 0
Perinnäisyys: ei
Versio: CSS3
JavaScript-kieli: object.style.transition="width 2s"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Numerot, jotka sisältävät -webkit-、-moz- tai -o- etuliitteen, viittaavat ensimmäiseen versioon, jota etuliite käytetään.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-