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
HOVER ME
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
300
0
Tehosteet
100%
100%
0°
0px
0px
8px
8px
Related Tools
Kynän muunnos CSS-muotoon
Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
SCSS:stä CSS:ksi muunnin
Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
Sass:sta CSS:ksi muunnin
Muunna Sass-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
HEX CMYK:ksi
Muunna HEX-värikoodit CMYK-muotoon tulostussovelluksiin
MD6-hajautusgeneraattori
Luo MD6-tiivisteitä nopeasti ja helposti
Oktaali desimaaliksi
Muunna oktaaliluvut desimaaliluvuiksi vaivattomasti