Kategorie
Kurs CSS

Transition CSS – Płynne przejścia

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.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *