Transition CSS – czyli przejścia CSS, są jednym z najważniejszych narzędzi, które pozwalają na tworzenie płynnych i atrakcyjnych animacji na stronach internetowych. Co więcej dzięki przejściom możemy w łatwy sposób animować zmiany właściwości CSS, co znacznie poprawia interaktywność i estetykę witryny. W tym artykule omówię, czym są przejścia CSS, jak działają oraz jak je stosować w praktyce.
Do czego służy transition CSS?
Przede wszystkim przejścia CSS to właściwości, które umożliwiają stopniową zmianę wartości jednej lub więcej właściwości CSS w określonym czasie. Dzięki nim możemy na przykład animować zmianę koloru, rozmiaru, pozycji czy innych właściwości elementów HTML.
selektor { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; }
transition-property
– właściwość CSS, którą chcemy animować (np.width
,height
,background-color
)transition-duration
– czas trwania animacji (np.1s
,500ms
)transition-timing-function
– funkcja określająca tempo zmiany właściwości (np.ease
,linear
,ease-in
,ease-out
,cubic-bezier()
)transition-delay
– opóźnienie przed rozpoczęciem animacji (np.0s
,2s
)
Przykład płynnych przejść w CSS
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}
W powyższym przykładzie, po najechaniu myszką na element .box
, jego szerokość, wysokość i kolor tła będą się płynnie zmieniać w ciągu 2 sekund.
Składnia szczegółowa transition w CSS
Właściwość transition
jest skrótowym zapisem dla czterech innych właściwości, które można definiować osobno:
Transition-property
Transition-property – okeśla wartości, które zostaną poddane efektowi przejścia np. kolor tła (background), kolor czcionki (color), szerokość (width), długość (height).
.box {
transition-property: width, height, background-color;
}
W przykładzie poniżej zastosujemy pseudo-klasę :hover, dzięki czemu uzyskamy efekt przejścia. Zmianie ulegnie szerokość box-a i tło.
.box {
padding: 10px;
width: 150px;
height: 150px;
background: dodgerblue;
transition-property: width, background;
transition-duration: 2s;
}
.box:hover {
width: 150px;
background: silver;
}
Po najechaniu kursorem, zmieni się szerokość i tło.
Transition-duration
Transition-duration – określa czas trwania animacji.
.box {
transition-duration: 2s;
}
W poniższym przykładzie czas trwania animacji wyniesie 5s.
.box {
padding: 10px;
width: 150px;
height: 150px;
background: crimson;
transition-property: background;
transition-duration: 5s;
}
.box:hover {
background: deepskyblue;
}
Czas trwania animacji 5s.
Transition-timing-function
Transition-timing-function – szybkość wykonywania przejścia w różnych fazach jego trwania.
.box {
transition-timing-function: wartość;
}
W miejsce wartość możemy wstawić:
- linear – stała szybkość
linear
- ease – szybciej na początku, wolniej pod koniec (domyślne ustawienie)
ease
- ease-in – wolniej na początku
ease-in
- ease-out – wolniej pod koniec
ease-out
- ease-in-out – wolniej na początku i pod koniec
ease-in-out
- cubic-bezier – własne ustawienie szybkości (wartości od 0 do 1)
cubic-bezier
- step-start – pominięcie ostatniej klatki
step-start
- step-end – pominięcie pierwszej klatki
step-end
- steps – ilość klatek animacji
steps
Transition-delay
Transition-delay – opóźnienie rozpoczęcia efektu.
.box {
transition-delay: 1s;
}
W poniższym przykładzie czas rozpoczęcie efektu nastąpi po 2s.
.box {
padding: 10px;
width: 150px;
height: 150px;
background: limegreen;
transition-property: background;
transition-duration: 5s;
transition-delay: 2s
}
.box:hover {
background: green;
}
Opóźnienie rozpoczęcia animacji 2s.
Praktyczne zastosowania przejść transition CSS
Zmiana koloru tła
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition CSS - Zmiana koloru tła</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 1s;
}
.box:hover {
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Skalowanie elementu
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition CSS - Skalowanie</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Przesuwanie elementu
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition CSS - Przesuwanie</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
position: relative;
left: 0;
transition: left 1s;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Obrót elementu
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition CSS - Obrót</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
transition: transform 1s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Transition CSS – podsumowanie
Transition CSS – przejścia pozwalają na tworzenie płynnych animacji i poprawę interaktywności stron internetowych. Dzięki właściwościom transition
, transition-property
, transition-duration
, transition-timing-function
i transition-delay
możemy kontrolować, które właściwości są animowane, jak długo trwa animacja, w jaki sposób animacja jest wykonywana i jakie jest opóźnienie przed jej rozpoczęciem.
Co więcej eksperymentowanie z różnymi ustawieniami przejść pozwoli na tworzenie bardziej zaawansowanych i atrakcyjnych efektów wizualnych. Pamiętaj jednak, że kluczem do stosowania ciekawych i złożonych przejść jest praktyka i ciągłe testowanie różnych kombinacji właściwości.