CSS Transitions - płynne przejścia między stanami

Witaj w Dolinie Królów Animacji! Podobnie jak egipskie hieroglify mogły zmieniać się z jednej formy w drugą pod wpływem światła słonecznego, tak w CSS możemy tworzyć płynne transitions - przejścia między stanami elementu. To najprostszy i najczęściej używany sposób na dodanie animacji do strony!

Czym są Transitions?

Transitions pozwalają na płynną zmianę właściwości CSS od jednej wartości do drugiej w określonym czasie.

Bez transition:

• Zmiana jest natychmiastowa (0ms)
• Efekt "skoku"

Z transition:

• Zmiana jest stopniowa
• Płynny, profesjonalny efekt

1/* Bez transition */
2.button {
3  background: blue;
4}
5
6.button:hover {
7  background: red;  /* Natychmiastowa zmiana */
8}
9
10/* Z transition */
11.button {
12  background: blue;
13  transition: background 0.3s;  /* Płynna zmiana przez 0.3s */
14}
15
16.button:hover {
17  background: red;  /* Teraz zmiana jest płynna! */
18}

Analogia egipska: To jak płynne przejście słońca od wschodu do zachodu nad piramidami - nie skacze natychmiast, ale przesuwa się stopniowo.

Składnia Transitions

Podstawowa składnia

1/* transition: property duration timing-function delay; */
2
3.element {
4  transition: background-color 0.3s ease 0s;
5}
6
7/* Lub osobno */
8.element {
9  transition-property: background-color;
10  transition-duration: 0.3s;
11  transition-timing-function: ease;
12  transition-delay: 0s;
13}

Komponenty transition:

1. transition-property - która właściwość ma być animowana
2. transition-duration - jak długo trwa animacja
3. transition-timing-function - jak szybkość zmienia się w czasie
4. transition-delay - opóźnienie przed startem

Transition-property - co animować?

1/* Jedna właściwość */
2.button {
3  transition-property: background-color;
4}
5
6/* Wiele właściwości */
7.button {
8  transition-property: background-color, color, transform;
9}
10
11/* Wszystkie właściwości (użyj ostrożnie!) */
12.button {
13  transition-property: all;
14}

Właściwości, które można animować:

• Kolory: color, background-color, border-color
• Wymiary: width, height, padding, margin
• Pozycja: top, left, right, bottom
• Transform: transform
• Opacity: opacity
• Box-shadow, border-radius, font-size, line-height
• I wiele innych...

Właściwości, których NIE można animować:

• display (nie ma wartości pośrednich)
• position (static, relative, absolute)
• font-family (nie ma wartości pośrednich)

Transition-duration - jak długo?

1/* W sekundach */
2.element {
3  transition-duration: 0.3s;  /* 300ms - standardowa wartość */
4}
5
6/* W milisekundach */
7.element {
8  transition-duration: 300ms;
9}
10
11/* Różne czasy dla różnych właściwości */
12.element {
13  transition-property: background-color, transform;
14  transition-duration: 0.3s, 0.5s;
15  /* background-color: 0.3s, transform: 0.5s */
16}

Rekomendowane czasy:

• 0.15s-0.2s - szybkie, responsywne (hover na linkach)
• 0.3s-0.4s - standardowe (przyciski, karty)
• 0.5s-0.8s - wolniejsze, bardziej dramatyczne (duże zmiany)
• 1s+ - bardzo wolne (tylko dla specjalnych efektów)

Transition-timing-function - krzywa czasowa

Timing function określa jak szybkość animacji zmienia się w czasie:

1.element {
2  /* Liniowa - stała szybkość */
3  transition-timing-function: linear;
4
5  /* Ease - wolny start, szybko, wolny koniec (default) */
6  transition-timing-function: ease;
7
8  /* Ease-in - wolny start, szybki koniec */
9  transition-timing-function: ease-in;
10
11  /* Ease-out - szybki start, wolny koniec */
12  transition-timing-function: ease-out;
13
14  /* Ease-in-out - wolny start i koniec */
15  transition-timing-function: ease-in-out;
16
17  /* Cubic-bezier - własna krzywa */
18  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
19
20  /* Steps - krokowa (nie płynna) */
21  transition-timing-function: steps(4);
22}

Wizualizacja timing functions:

• linear: --------- (stała prędkość)
• ease: _/‾‾‾_ (wolny start i koniec)
• ease-in: __/‾‾ (wolny start)
• ease-out: ‾‾__ (wolny koniec)
• ease-in-out: _/‾_ (najbardziej naturalny)

Narzędzie online: https://cubic-bezier.com/

Transition-delay - opóźnienie

1.element {
2  transition-delay: 0.2s;  /* Zacznij po 0.2s */
3}
4
5/* Różne opóźnienia dla różnych właściwości */
6.element {
7  transition-property: opacity, transform;
8  transition-duration: 0.3s, 0.3s;
9  transition-delay: 0s, 0.1s;
10  /* opacity natychmiast, transform po 0.1s */
11}

Praktyczne przykłady

1. Button hover effect

1<button class="btn">Kliknij mnie</button>

1.btn {
2  background: #3498db;
3  color: white;
4  padding: 12px 24px;
5  border: none;
6  border-radius: 4px;
7  cursor: pointer;
8  font-size: 16px;
9
10  /* Transition na wielu właściwościach */
11  transition: background-color 0.3s ease,
12              transform 0.2s ease,
13              box-shadow 0.3s ease;
14}
15
16.btn:hover {
17  background: #2980b9;
18  transform: translateY(-2px);
19  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
20}
21
22.btn:active {
23  transform: translateY(0);
24  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
25}

2. Card hover - reveal

1<div class="card">
2  <img src="pyramid.jpg" alt="Piramida">
3  <div class="card-overlay">
4    <h3>Wielka Piramida</h3>
5    <p>Jedna z Siedmiu Cudów Świata</p>
6  </div>
7</div>

1.card {
2  position: relative;
3  width: 300px;
4  height: 400px;
5  overflow: hidden;
6  border-radius: 8px;
7}
8
9.card img {
10  width: 100%;
11  height: 100%;
12  object-fit: cover;
13  transition: transform 0.5s ease;
14}
15
16.card-overlay {
17  position: absolute;
18  bottom: 0;
19  left: 0;
20  right: 0;
21  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
22  padding: 20px;
23  color: white;
24
25  /* Overlay zaczyna poniżej karty */
26  transform: translateY(100%);
27  transition: transform 0.4s ease;
28}
29
30.card:hover img {
31  transform: scale(1.1);  /* Zoom na obrazku */
32}
33
34.card:hover .card-overlay {
35  transform: translateY(0);  /* Overlay wjeżdża */
36}

3. Navigation link underline

1<nav>
2  <a href="#" class="nav-link">Home</a>
3  <a href="#" class="nav-link">About</a>
4  <a href="#" class="nav-link">Contact</a>
5</nav>

1.nav-link {
2  position: relative;
3  color: #2c3e50;
4  text-decoration: none;
5  padding: 10px 0;
6  display: inline-block;
7}
8
9/* Underline jako ::after pseudo-element */
10.nav-link::after {
11  content: '';
12  position: absolute;
13  bottom: 0;
14  left: 0;
15  width: 0;  /* Zaczyna od 0 */
16  height: 2px;
17  background: goldenrod;
18
19  /* Animuj szerokość */
20  transition: width 0.3s ease;
21}
22
23.nav-link:hover::after {
24  width: 100%;  /* Rozszerz do pełnej szerokości */
25}

4. Modal fade-in

1<div class="modal" id="myModal">
2  <div class="modal-content">
3    <h2>Tytuł Modal</h2>
4    <p>Treść modala...</p>
5    <button class="close">Zamknij</button>
6  </div>
7</div>

1.modal {
2  position: fixed;
3  top: 0;
4  left: 0;
5  width: 100%;
6  height: 100%;
7  background: rgba(0, 0, 0, 0.8);
8  display: flex;
9  align-items: center;
10  justify-content: center;
11
12  /* Zaczyna niewidoczny */
13  opacity: 0;
14  pointer-events: none;
15
16  /* Animuj opacity i backdrop */
17  transition: opacity 0.3s ease;
18}
19
20.modal.active {
21  opacity: 1;
22  pointer-events: auto;
23}
24
25.modal-content {
26  background: white;
27  padding: 30px;
28  border-radius: 8px;
29  max-width: 500px;
30
31  /* Zaczyna poniżej */
32  transform: translateY(50px);
33  transition: transform 0.3s ease 0.1s;  /* Opóźnienie 0.1s */
34}
35
36.modal.active .modal-content {
37  transform: translateY(0);
38}

5. Loading skeleton

1<div class="skeleton">
2  <div class="skeleton-line"></div>
3  <div class="skeleton-line"></div>
4  <div class="skeleton-line short"></div>
5</div>

1.skeleton-line {
2  height: 16px;
3  background: linear-gradient(
4    90deg,
5    #f0f0f0 0%,
6    #e0e0e0 50%,
7    #f0f0f0 100%
8  );
9  background-size: 200% 100%;
10  border-radius: 4px;
11  margin-bottom: 10px;
12
13  /* Animuj position gradient */
14  animation: skeleton-loading 1.5s ease-in-out infinite;
15}
16
17.skeleton-line.short {
18  width: 60%;
19}
20
21@keyframes skeleton-loading {
22  0% {
23    background-position: 200% 0;
24  }
25  100% {
26    background-position: -200% 0;
27  }
28}

Transitions vs Animations

Używaj Transitions kiedy:

• Potrzebujesz prostej zmiany między dwoma stanami
• Animacja jest wywołana przez interakcję użytkownika (hover, focus, click)
• Chcesz animować powrót do stanu początkowego
• Prostsza implementacja

Używaj Animations (@keyframes) kiedy:

• Potrzebujesz więcej niż 2 stanów (keyframes)
• Animacja powinna działać automatycznie (bez interakcji)
• Potrzebujesz pętli (infinite)
• Potrzebujesz precyzyjnej kontroli nad timing

Multiple Transitions

1/* Shorthand - wszystkie na raz */
2.element {
3  transition: background 0.3s ease,
4              color 0.3s ease,
5              transform 0.5s ease-out 0.1s,
6              box-shadow 0.4s ease;
7}
8
9/* Lub jeszcze krócej (dla tych samych wartości) */
10.element {
11  transition: all 0.3s ease;
12}

Uwaga z all: Może animować niechciane właściwości i wpływać na performance. Lepiej wymienić konkretne właściwości.

Performance Transitions

Szybkie właściwości (GPU-accelerated):

• transform (translate, scale, rotate)
• opacity

Wolne właściwości:

• width, height (powodują reflow)
• margin, padding (powodują reflow)
• top, left (wolniejsze niż transform)

1/* Wolne */
2.element {
3  transition: width 0.3s, left 0.3s;
4}
5
6.element:hover {
7  width: 200px;
8  left: 100px;
9}
10
11/* Szybkie */
12.element {
13  transition: transform 0.3s, opacity 0.3s;
14}
15
16.element:hover {
17  transform: translateX(100px) scaleX(2);
18  opacity: 0.8;
19}

Podsumowanie

CSS Transitions:

• Płynne przejścia między dwoma stanami
• Wywoływane przez zmianę CSS (hover, focus, class)
• Składnia: transition: property duration timing-function delay
• Najpopularniejsze: opacity, transform
• Rekomendowany czas: 0.2s-0.4s
• Timing function: ease-in-out dla naturalności

Best Practices:

1. Animuj transform i opacity dla performance
2. Używaj ease-in-out dla naturalności
3. 0.2s-0.4s dla większości interakcji
4. Testuj na urządz eniach mobilnych
5. Dodawaj transitions do stanu bazowego, nie :hover

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(135deg, #8d6e2e, #c9a84c);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: #3d2914;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #3d2914;
25}
26
27.scroll-container {
28  display: flex;
29  justify-content: center;
30  margin: 20px 0;
31}
32
33.papyrus {
34  width: 300px;
35  background: linear-gradient(180deg, #f5deb3, #deb887, #d2b48c);
36  border-radius: 8px;
37  padding: 25px;
38  border: 3px solid #8d6e2e;
39  cursor: pointer;
40  overflow: hidden;
41  transform-origin: left center;
42  /* Dodaj transition tutaj */
43  /* transition: transform 0.6s ease-in-out, box-shadow 0.6s ease; */
44  transform: scaleX(0.3);
45}
46
47/* Dodaj efekt :hover dla .papyrus */
48/* .papyrus:hover { */
49/*   transform: scaleX(1); */
50/*   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); */
51/* } */
52
53.papyrus-content {
54  font-family: serif;
55  font-size: 16px;
56  line-height: 1.8;
57  color: #3d2914;
58}
59
60.hint {
61  margin-top: 30px;
62  color: #5a3d1a;
63  font-style: italic;
64}

Pamiętaj: Transitions to jak płynny ruch słońca nad egipskimi piramidami - nie skoki, ale stopniowe, naturalne przejścia!