Właściwości przejść w CSS są mechanizmem umożliwiającym płynne zmiany wartości właściwości CSS pomiędzy dwoma stanami. Wykorzystanie przejść w nowoczesnym projektowaniu stron internetowych nie tylko wpływa na estetykę, ale również może przyczynić się do zwiększenia szybkości ładowania witryny, eliminując potrzebę stosowania dodatkowych skryptów czy animacji. Dzięki temu, osiągamy korzyści zarówno w zakresie wydajności, jak i przejrzystości kodu. Ponadto, właściwości przejść CSS są niezwykle elastyczne, co umożliwia ich łatwe dostosowanie do różnych urządzeń, przeglądarek czy rozdzielczości ekranów. Stąd, ich umiejętne zastosowanie staje się nieodłącznym elementem kreowania responsywnych i porywających stron internetowych.
Właściwości przejść
transition-property — określa, które właściwości CSS mają być animowane. Można podać pojedynczą właściwość, kilka właściwości oddzielonych przecinkami lub użyć wartości all (wszystkie właściwości).
<predata-previewers=””>.box {
transition-property: background-color, transform;
}
transition-duration — określa czas trwania animacji dla każdej właściwości. Można podać pojedynczą wartość czasu (w sekundach s lub milisekundach ms) lub listę wartości oddzielonych przecinkami (dla wielu właściwości).
<predata-previewers=””>.box {
transition-duration: 0.5s, 1s;
}
transition-timing-function — określa funkcję czasową, czyli sposób, w jaki animacja ma przyspieszać lub zwalniać. Można użyć predefiniowanych funkcji, takich jak linear, ease, ease-in, ease-out, ease-in-out, czy zdefiniować własne funkcje za pomocą funkcji Beziera (cubic-bezier).
<predata-previewers=””>.box {
transition-timing-function: ease-in-out, linear;
}
transition-delay — określa opóźnienie rozpoczęcia animacji dla każdej właściwości. Można podać pojedynczą wartość czasu (w sekundach s lub milisekundach ms) lub listę wartości oddzielonych przecinkami (dla wielu właściwości).
<predata-previewers=””>.box {
transition-delay: 0s, 0.5s;
}
Wszystkie te właściwości można łączyć w jednym skrócie transition:
<predata-previewers=””>.box {
transition: background-color 0.5s ease-in-out 0s, transform 1s linear 0.5s;
}
Przykład zastosowania przejścia w praktyce – efekt hover zmieniający kolor tła i skalę elementu:
<predata-previewers=””>.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease-in-out, transform 0.3s ease-in;
}
.box:hover {
background-color: blue;
transform: scale(1.2);
}
W powyższym przykładzie, element o klasie box zmienia kolor tła z czerwonego na niebieski i powiększa się o 20% podczas najechania na niego myszką. Zastosowano płynne przejścia dla zmiany koloru tła i transformacji, które trwają odpowiednio 0.5s i 0.3s. Funkcje czasowe zostały ustawione na ease-in-out dla koloru tła oraz ease-in dla transformacji, co sprawia, że zmiany zachodzą w sposób płynny i atrakcyjny wizualnie.
Warto zapamiętać
Właściwości przejść CSS, będące jednym z istotnych elementów tej technologii, pozwalają na płynne i subtelne zmiany wartości parametrów elementów strony, takich jak kolor, rozmiar, czy pozycję. Stosując je w odpowiedni sposób, mamy możliwość wzbogacić wrażenia użytkowników, poprawić nawigację i zwiększyć interaktywność witryn.
