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