Dzięki transition możemy uzyskać pewien rodzaj animacji. Termin transition oznacza przejście. Dostajemy więc możliwość upłynnienia zmiany jakiejś cechy elementu i określenia czasu trwania tej zmiany. Przykładowo: po najechaniu na czerwony kwadrat o szerokości 100 px, chcemy aby stał się niebieski i był szeroki na 500 px. Bez użycia transition, nastąpi przeskok, który jest nieestetyczny. Dodając czas np. 2s sprawiamy, że PRZEJŚCIE będzie płynne.
Stwórzmy wspomniany już przeze mnie kwadrat.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: red;
}
div:hover {
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Zauważcie, że po najechaniu na kwadrat kursorem myszki, następuje przeskok. Dodamy teraz cechę transition, dzięki której nastąpi płynna zmiana wysokości. Wstawiamy transition: height 2s i to wszystko. Określamy w ten sposób, że wysokość ze 150 px ma się zmienić na 500 px (co określiliśmy w div:hover) i ma to trwać dwie sekundy.
Jeśli nie wpiszemy czasu trwania, przejście się nie wykona. Wynika to z tego, że domyślną wartością jest 0 sekund.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: red;
-webkit-transition: width 2s; /* dla przegladarek Safari */
transition: height 2s;
}
div:hover {
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>W takiej sytuacji, po zjechaniu myszką z elementu, następuje płynny powrót do szerokości wyjściowej.
KILKA WARTOŚCI TRANSITION
Powyższy przykład określa zmianę jednej cechy w określonym czasie. Na szczęście css nas nie ogranicza i pozwala definiować zmianę wielu cech jednocześnie.
Zajmiemy się teraz zmianą wysokości, szerokości, koloru i cienia czerwonego kwadratu. Wartości docelowe określamy w div:hover a wartości transition wpisujemy po przecinku jak w poniższym przykładzie.
div {
width: 150px;
height: 150px;
background: red;
transition: height 2s, width 2s, background 4s, box-shadow 3s;
}
div:hover {
height: 300px;
width: 300px;
background: violet;
box-shadow: 2px 2px 2px 5px green;
}OKREŚLANIE PRĘDKOŚCI TRANSITION
Jeżeli zdecydujemy, że kwadrat ma przez 2 sekundy się powiększać, to na początku powiększa się powoli, potem przyspiesza by na końcu znów zwolnić. To jest wartość domyślna cechy transition-timing-function, której nie musimy definiować. Możemy się zdecydować także na jedną z kilku opcji, mianowicie:
transition-timing-function: linear;– przejście z jednakową prędkością od początku do końca,transition-timing-function: ease-in;– wolny start i przyspieszenie,transition-timing-function: ease-out;– szybki start i zwolnienie,transition-timing-function: ease-in-out;– powolny start i powolny koniec.
JAK OPÓŹNIĆ TRANSITION?
W celu odłożenia przejścia w czasie należy użyć transition-delay. Wartości podajemy w sekundach np. transition-delay: 2s;.
TRANSITION – OPTYMALIZACJA KODU
Można zapisać cechy transition w ten sposób:
transition-property: width;
transition-duration: 3s;
transition-timing-function: ease-in;
transition-delay: 10s;lub w sposób skrócony:
transition: width 3s ease-in 10s;Transition można użyć razem z transform, powstają w ten sposób ciekawe przejścia. Otwiera się więcej możliwości. Więcej na ten temat będzie można przeczytać w kolejnym artykule.