CSS3 - transition-timing-function
Transkrypt
CSS3 - transition-timing-function
CSS3 - transition-timing-function Dodał pwimmer poniedziałek, 21 luty 2011 15:39 div.przemianaease { width:100px; height:50px; background-color: olive; transition: width ease 3000ms; -webkit-transition: width ease 3000ms; -o-transition: width ease 3000ms; -moz-transition: width ease 3000ms; } div.przemianaease:hover {width:500px;} div.przemianalinear { width:100px; height:50px; background-color: khaki; transition: width linear 3000ms; -webkit-transition: width linear 3000ms; -o-transition: width linear 3000ms; -moz-transition: width linear 3000ms; } div.przemianalinear:hover {width:500px;} div.przemianaeaseout { width:100px; height:50px; background-color: gainsboro; transition: width ease-out 3000ms; -webkit-transition: width ease-out 3000ms; -o-transition: width ease-out 3000ms; -moz-transition: width ease-out 3000ms; } div.przemianaeaseout:hover {width:500px;} Tematy: transition | transition-property | transition-duration | transition-timing-function | transition-delay Zastosowanie Dziedziczenie Wartości Wartość domyślna Przykład Składnia JavaScript Dane w pigułce Określa rozkład czasowy przemiany pojemnika nie linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier ease transition-timing-function: ease object .style.transitionTimingFunction="ease" Aby zdefiniować rozkład czasowy przemiany pojemnika, należy wpisać w definicji stylu transition-timing-function:wartość. Żadna z przeglądarek nie obsługuje czystego kodu, Chrome i Safari wymagają prefiksu -webkit-, natomiast Opera - prefiksu -o-. Internet Explorer 9 realizuje polecenie z błędami. Znaczenie wartości: - linear: jednakowa szybkość rozszerzania - ease: wolno-szybko-wolno - odpowiednik cubic-bezier (0.25,0.1,0.25,1) - ease-in: wolno-normalnie - odpowiednik cubic-bezier (0.42,0,1,1)) - ease-out: normalnie-wolno - odpowiednik cubic-bezier (0,0,0.58,1) - ease-in-out: wolno-normalnie-wolno - odpowiednik cubic-bezier (0.42,0,0.58,1) - cubic-bezier(n,n,n,n): samodzielnie zdefiniowana szybkość, wartości z przedziału [0-1] Przykładowa definicja: div.przemianalinear { width:100px; height:50px; background-color: olive; transition-property: width; transition-duration: 3000ms; transition-timing-function: linear; -webkit-transition-property: width; -webkit-transition-duration: 3000ms; -webkit-transition-timing-function: linear; -o-transition-property: width; -o-transition-duration: 3000ms; -o-transition-timing-function: linear; -moz-transition-property: width; -moz-transition-duration: 3000ms; -moz-transition-timing-function: linear; } określa pierwotny rozmiar pojemnika oraz sposób rozszerzenia, czas jego trwania (3000ms) i rozkład czasowy (linear). Użyliśmy tu klasy .przemianalinear wskazującej wybrany pojemnik. Z kolei kod: div.przemianalinear:hover { width:500px; } definiuje szerokość pojemnika po przesunięciu nad niego kursora myszy (pseudoklasa :hover). Zachowanie pojemnika z funkcją linear. Zachowanie pojemnika z funkcją ease. Zachowanie pojemnika z funkcją ease-out. 1/2 CSS3 - transition-timing-function Dodał pwimmer poniedziałek, 21 luty 2011 15:39 Interpretacja: Chrome (z prefiksem), Opera (z prefiksem), Firefox (z prefiksem), Internet Explorer 9 (błędnie)). 2/2