Siirtymisomaisuus - CSS-temppuja

Anonim

transition-propertyOmaisuus, jota käytetään tavallisesti osana transitionpika, käytetään määrittämään, mitä omaisuutta, tai ominaisuuksia, joita haluat käyttää siirtymisen vaikutus.

Tämä tehdään antamalla kiinteistön nimi arvoksi:

.example ( transition-property: color; )

Arvo voi olla jokin seuraavista:

  • Yksi kiinteistön nimi, kuten yllä olevassa esimerkissä
  • Pilkulla erotettu luettelo ominaisuuksien nimistä (lyhyt- tai pitkäkätinen) useiden ominaisuuksien siirtämiseksi yhdelle elementille
  • Avainsana none, joka osoittaa, että mitään ominaisuutta ei siirretä
  • Avainsana all, joka osoittaa, että kaikki ominaisuudet siirtyvät (oletus)

Kun pilkku erottaa arvot, ominaisuuksien nimiä ovat olennaisesti kartoitettu toisen siirtyminen määritellyt ominaisuudet ( transition-timing-function, transition-duration, ja transition-delay). Joten tämä tarkoittaa, että jos pilkuilla erotettu ominaisuuksien luettelo sisältää yhden tai useamman virheellisen ominaisuuden nimen, muut ominaisuudet siirtyvät edelleen ja yhdistyvät aiottuihin liittyviin siirtymäominaisuuksiin.

Tekninen kuvaus kuvaa tätä sanomalla:

"(U) Tunnistamattomat tai animoimattomat ominaisuudet on pidettävä luettelossa indeksien yhteensopivuuden säilyttämiseksi."

Kun käytetään arvoa nonetai yleisiä avainsanoja inherittai initial, näitä arvoja ei voida käyttää pilkuilla erotetussa luettelossa, muuten tämä johtaa syntaksivirheeseen ja koko rivi jätetään huomiotta.

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

.example ( -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )

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

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
Toimii Toimii 4+ 10,5+ 10+ 2.1+ 3.2+