CSS transition-property ominaisuus

Määrittely ja käyttö

transition-property-ominaisuus määrittää过渡效果的 CSS-ominaisuuksien nimet。(当指定的 CSS-ominaisuus muuttuu时,过渡效果将开始)。

Vinkki:过渡效果通常在用户将鼠标指针浮动到元素上时发生。

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

Katso myös:

CSS-opas:CSS siirtymä

HTML DOM -viittausopas:transitionProperty-ominaisuus

esimerkki

Kun hiiren osoitin asetetaan div-elementtiin, syntyvät pehmeästi muuttuvat过渡效果,muuttamalla elementin leveyttä:

div {
  transition-property: width;
}

Kokeile itse

CSS-grammatiikka

transition-property: none|all|ominaisuus;

ominaisuuden arvo

arvo kuvaus
ei Ei ominaisuutta saa过渡效果。
kaikki Kaikki ominaisuudet saavat过渡效果。
ominaisuus Määritellään CSS-ominaisuuksien luettelo, joihin sovelletaan过渡效果,列表用逗号分隔。

Tekninen yksityiskohta

Oletusarvo: kaikki
Perinnäisyys: ei
Versio: CSS3
JavaScript-kieli: objekti.style.transitionProperty="width,height"

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-