Tematy: transition | transition-property | transition-duration | transition-timing-function | transition-delay
| Dane w pigułce | |
| Zastosowanie | Określa rozkład czasowy przemiany pojemnika |
| Dziedziczenie | nie |
| Wartości | linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier |
| Wartość domyślna | ease |
| Przykład | transition-timing-function: ease |
| Składnia JavaScript | 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.
Interpretacja: Chrome (z prefiksem), Opera (z prefiksem), Firefox (z prefiksem), Internet Explorer 9 (błędnie)).
