Style transition-ominaisuus

Määrittely ja käyttö

transition Ominaisuus on neljän过渡 ominaisuuden lyhennysominaisuus:

Huomautus:Aina määritä transitionDuration-ominaisuusMuuten过渡 效果的持续时间为 0 ja过渡 将无效。

Katso myös:

CSS-käyttöohjeet:transition-ominaisuus

Esimerkki

Pysäytä hiiri div-elementin päällä muuttaaksesi sen ulkoasua vähitellen:

document.getElementById("myDIV").style.transition = "all 2s";

Kokeile itse

Syntaksi

Palauta transition-ominaisuus:

object.style.transition

Aseta transition-ominaisuus:

object.style.transition = "property duration timing-function delay|initial|inherit"

Ominaisuuden arvo

Arvo Kuvaus
transitionProperty Määrittelee过渡 效果所针对的 CSS 属性的名称。
transitionDuration Määrittelee, kuinka monta sekuntia tai millisekuntia过渡 效果需要才能完成。
transitionTimingFunction Määrittelee过渡 效果的速度曲线。
transitionDelay Määrittelee, milloin过渡 效果开始。
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso initial.
inherit Perii tämän ominaisuuden isältään. Katso inherit.

Tekninen yksityiskohta

Oletusarvo: all 0 ease 0
Palautusarvo: merkkijono, joka ilmaisee elementin transition-ominaisuus.
CSS-versio: CSS3

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1