CSS3-siirtymägeneraattori
Sujuva peittävyyden siirtyminen
Suositut esiasetukset
Häivytystehoste
Tasainen peittävyyssiirtymä
Skaalaustehoste
Elementin koon muuttaminen osoittimen
Kierrätehoste Kierrä
elementtiä vietäessä
Liukutehoste
Siirrä elementin sijaintia
Värin muutos
Taustavärin siirtymä
Tietoja siirtymistä
CSS-siirtymien avulla voit muuttaa ominaisuuksien arvoja sujuvasti tietyn ajan kuluessa.
Yleisesti animoidut ominaisuudet include:
- leveys, korkeusmarginaali
- , pehmusteen
- peittävyys, väri
- transform (scale, rotate, translate)
- background-color
Ammattilaisvinkki: Käytä "Kaikki ominaisuudet" -vaihtoehtoa animoidaksesi kaikki muutokset.
Preview
Luotu koodi
.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; } .element:hover { /* Hover styles will be generated here */ }
Siirtymä Ohjaimet
Tehosteet
Related Tools
Less CSS-muotoon -muunnin
Muunna Less-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
CSS3-siirtymägeneraattori
Sujuva peittävyyden siirtyminen
Kynän muunnos CSS-muotoon
Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
Näennäistehomuunnin
Muunna näennäinen teho eri yksiköiden välillä tarkasti ja helposti
Virtamuunnin
Muunna sähkövirta eri yksiköiden välillä tarkasti ja helposti
Luo kauniita CSS-laatikon varjoja vaivattomasti
Luo upeita laatikon varjoja intuitiivisella käyttöliittymällämme. Kopioi CSS-koodi ja käytä sitä projekteissasi välittömästi.