Transitions i Proste Animacje

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się backgrounds, borders i shadows.

Twoje cards stały się bardziej polished.

Twoje buttons zaczęły wyglądać przyzwoicie.

CSS w końcu uczesał włosy.

Teraz dodamy ruch.

Nie chaos.

Nie obracanie wszystkiego jak strona zrobiona przez podekscytowaną wiewiórkę.

Płynny ruch.

Dzisiaj nauczymy się transitions i prostych animations.

Transitions pomagają zmianom CSS odbywać się płynnie.

Animations pozwalają elementom poruszać się automatycznie.

Użyte dobrze, sprawiają, że website wydaje się żywy.

Użyte źle, sprawiają, że user zastanawia się, czy strona potrzebuje pomocy medycznej.

Czego Się Nauczysz

W tej lekcji nauczysz się:

czym są CSS transitions;
jak używać transition;
jak animować hover effects;
jak używać transform;
jak używać scale;
jak używać translateY;
jak tworzyć płynne buttons i cards;
czym są @keyframes;
jak tworzyć proste CSS animations;
jak unikać irytującego ruchu.

Czym Jest Transition?

Transition sprawia, że zmiana CSS dzieje się stopniowo.

Bez transition:

.button:hover {
  background-color: #2563eb;
}

Kolor zmienia się natychmiast.

Z transition:

.button {
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: #2563eb;
}

Teraz kolor zmienia się płynnie.

Browser mówi:

“Spokojnie. Nie będę skakał. Będę płynął.”

I to jest właściwy duch CSS.

Stwórz Projekt

Stwórz folder dla tej lekcji:

mkdir css-lesson9
cd css-lesson9
touch index.html
touch style.css

Powinieneś mieć:

css-lesson9/
  index.html
  style.css

Otwórz folder w swoim edytorze.

Zbudujemy małą interactive landing page z:

navbar;
hero section;
animated button;
cards z hover effects;
jedną prostą keyframe animation.

Nic zbyt szalonego.

To nie jest cyrk.

To website z manierami.

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transitions i Proste Animacje</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <nav class="navbar">
      <h1 class="logo">MotionCSS</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Lekcje</a>
        <a href="#">Projekty</a>
        <a href="#">Kontakt</a>
      </div>
    </nav>

    <section class="hero-content">
      <p class="eyebrow">CSS Motion</p>
      <h2>Spraw, Żeby Interfejs Poruszał Się Płynnie</h2>
      <p>
        Transitions i animations pomagają stronie wyglądać bardziej responsive, polished i alive.
      </p>
      <a href="#" class="button">Zacznij Ruch</a>
    </section>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Ruch Powinien Pomagać</h2>
      <p>
        Dobry motion prowadzi uwagę. Zły motion rozprasza users i sprawia, że page wygląda nerwowo.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <div class="icon">↗</div>
        <h2>Transitions</h2>
        <p>Sprawiają, że style changes są płynne, gdy users hover, focus albo interact.</p>
      </article>

      <article class="card featured">
        <div class="icon">★</div>
        <h2>Transforms</h2>
        <p>Przesuwają, skalują, obracają i zmieniają elements bez psucia layoutu.</p>
      </article>

      <article class="card">
        <div class="icon">∞</div>
        <h2>Animations</h2>
        <p>Tworzą powtarzalny albo automatyczny ruch za pomocą keyframes.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Stworzone podczas nauki CSS transitions i prostych animations.</p>
  </footer>
</body>
</html>

To daje nam:

hero;
navigation;
button;
intro card;
trzy cards;
icons;
footer.

Teraz możemy sprawić, że interface zacznie się ruszać.

Ostrożnie.

Jak ninja.

Nie jak pralka pełna cegieł.

Zacznij od Bazowego CSS

Otwórz style.css i dodaj:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

To daje nam czystą podstawę.

Teraz dodaj styles dla hero i navigation:

.hero {
  background: linear-gradient(135deg, #111827, #312e81);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Strona ma teraz dark hero i clean navbar.

Dobrze.

Jeszcze nie ma ruchu.

Website stoi spokojnie i zachowuje się grzecznie.

Za chwilę nauczymy go się ruszać.

Wystylizuj Hero Content

Dodaj to:

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #c4b5fd;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #ddd6fe;
  font-size: 20px;
  line-height: 1.7;
}

Hero wygląda teraz jak prawdziwa section.

Duży heading.

Readable paragraph.

Small label.

Bardzo professional.

Prawie podejrzanie spokojne.

Wystylizuj Button

Dodaj to:

.button {
  display: inline-block;
  background-color: white;
  color: #312e81;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

Button wygląda dobrze.

Ale jeszcze nie reaguje.

Po prostu tam siedzi.

Jak dzwonek do drzwi, który nie wydaje dźwięku.

Naprawmy to.

Dodaj Transition

Dodaj to do .button:

.button {
  display: inline-block;
  background-color: white;
  color: #312e81;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

Teraz dodaj hover:

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

Teraz gdy najedziesz myszką, button płynnie przesuwa się w górę.

Ważne:

Transition dodajemy do normalnego stanu.

Nie tylko do hover.

Poprawnie:

.button {
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
}

Jeśli dasz transition tylko na hover, efekt może wyglądać dziwnie, gdy myszka opuści element.

CSS jest wrażliwy.

Jak skrzypce.

Tylko ze średnikami.

Property transition

Property transition może zawierać:

property duration timing-function delay

Przykład:

transition: background-color 0.3s ease;

To oznacza:

property: background-color;
duration: 0.3s;
timing: ease.

Możesz robić transition wielu properties:

transition: transform 0.2s ease, box-shadow 0.2s ease;

Możesz też użyć:

transition: all 0.2s ease;

Ale uważaj z all.

Może animować rzeczy, których nie planowałeś.

CSS kocha niespodzianki.

Czasem za bardzo.

Transform

Property transform zmienia sposób, w jaki element jest wizualnie pokazany.

Może przesuwać, skalować, obracać albo pochylać element.

Przykłady:

transform: translateY(-4px);
transform: scale(1.05);
transform: rotate(3deg);

Transforms są useful, bo zwykle nie przeszkadzają reszcie layoutu.

Element porusza się wizualnie.

Ale document flow zostaje stabilny.

To dobrze.

Element, który się rusza, nie powinien sprawiać, że cała page panikuje.

Wystylizuj Page i Cards

Dodaj to:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.intro-card h2 {
  margin-top: 0;
}

.intro-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Teraz wystylizuj każdą card:

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card h2 {
  margin-top: 16px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

Card ma teraz transition.

Ale hover trzeba jeszcze dodać.

Card Hover Effect

Dodaj:

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border-color: #7c3aed;
}

Teraz card delikatnie unosi się przy hover.

To bardzo common pattern.

Mówi userowi:

“Ten element jest interactive.”

Ale nie przesadzaj z ruchem.

Źle:

transform: translateY(-40px);

To sprawia, że card wygląda, jakby próbowała opuścić spotkanie.

Mały ruch jest lepszy.

Icon Animation

Wystylizuj icon:

.icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: #ede9fe;
  color: #6d28d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

Teraz spraw, żeby icon ruszała się, gdy card ma hover:

.card:hover .icon {
  transform: scale(1.1) rotate(3deg);
}

To oznacza:

Gdy card ma hover, zmień icon wewnątrz niej.

To useful.

Cała card reaguje.

Icon też reaguje.

Interface wydaje się połączony.

Jakby CSS w końcu zrozumiał teamwork.

Featured Card

Dodaj:

.featured {
  border-color: #7c3aed;
  background-color: #f5f3ff;
}

Teraz middle card wyróżnia się.

Page ma hierarchy.

Users widzą, co jest ważne.

Dobry design prowadzi uwagę.

Zły design rzuca glitter i liczy na szczęście.

Czym Są Keyframes?

Transitions dzieją się, gdy property się zmienia.

Animations mogą działać automatycznie.

Do animations używamy @keyframes.

Przykład:

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

To opisuje animation o nazwie float.

Na początku element jest normalny.

W środku przesuwa się w górę.

Na końcu wraca.

Teraz możemy ją zastosować.

Dodaj Prostą Animation

Dodaj to:

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

Teraz zastosuj to do button:

.button {
  animation: float 3s ease-in-out infinite;
}

To sprawia, że button delikatnie unosi się bez końca.

Ale uważaj.

Infinite animation może stać się irytująca.

Używaj jej tylko wtedy, gdy jest subtle.

Jeśli button skacze bez końca, jakby wypił siedem espresso, users nie będą wdzięczni.

Lepsze Użycie Animation

Zamiast animować main button forever, możesz animować tylko mały decorative element.

Na przykład dodaj floating effect do featured icon:

.featured .icon {
  animation: float 3s ease-in-out infinite;
}

To jest bardziej subtle.

Page wydaje się alive.

Ale nie desperate.

Dobry motion jest spokojny.

Zły motion wygląda jak website, który próbuje zwrócić uwagę podczas alarmu przeciwpożarowego.

Footer

Dodaj:

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Prosty footer.

Nie potrzeba animation.

Nie wszystko musi się ruszać.

Serio.

Nie animuj footer tylko dlatego, że możesz.

CSS power must be controlled.

Pełny CSS

Twój style.css powinien wyglądać tak:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.hero {
  background: linear-gradient(135deg, #111827, #312e81);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #c4b5fd;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #ddd6fe;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: white;
  color: #312e81;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.intro-card h2 {
  margin-top: 0;
}

.intro-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border-color: #7c3aed;
}

.card h2 {
  margin-top: 16px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: #ede9fe;
  color: #6d28d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.card:hover .icon {
  transform: scale(1.1) rotate(3deg);
}

.featured {
  border-color: #7c3aed;
  background-color: #f5f3ff;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

.featured .icon {
  animation: float 3s ease-in-out infinite;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .hero-content h2 {
    font-size: 42px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero-content {
    padding: 56px 20px 72px;
    text-align: left;
  }

  .hero-content h2 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro-card,
  .card {
    padding: 24px;
  }
}

Zapisz.

Odśwież.

Najedź na button.

Najedź na cards.

Zobacz, jak featured icon delikatnie float.

Twoja page ma teraz motion.

Nie za dużo.

Tylko tyle, żeby czuła się alive.

Jak professional website po jednej kawie.

Nie po siedmiu.

Częste Błędy

Animowanie Wszystkiego

Zły pomysł:

* {
  transition: all 1s ease;
}

To może tworzyć dziwne efekty wszędzie.

Inputs.

Layout changes.

Ukryte niespodzianki.

CSS chaos w ładnej kurtce.

Bądź konkretny.

Lepiej:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

Za Dużo Ruchu

Źle:

.card:hover {
  transform: rotate(20deg) scale(1.3);
}

Chyba że budujesz clown portfolio, to prawdopodobnie za dużo.

Mały ruch zwykle działa lepiej.

.card:hover {
  transform: translateY(-4px);
}

Infinite Animations Wszędzie

Infinite animations mogą rozpraszać.

Używaj ich ostrożnie.

Dobre miejsca:

small icons;
subtle background elements;
loading indicators.

Złe miejsca:

paragraphs;
entire sections;
każda card;
footer;
twoja dusza.

Accessibility Note

Niektórzy users preferują reduced motion.

CSS wspiera to przez:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

To szanuje users, którzy mogą czuć się niekomfortowo przez motion.

Nie musisz używać tego w każdym beginner exercise.

Ale zapamiętaj.

Dobre websites dbają o users.

Nie tylko o to, żeby wyglądać cool.

Praktyka

Stwórz trzy cards.

Każda card powinna:

lekko unosić się na hover;
zwiększać shadow na hover;
animować icon na hover;
używać transition;
pozostać readable.

Użyj:

transition;
transform;
translateY;
scale;
box-shadow.

Trzymaj motion mały.

Cel to polish.

Nie panic.

Mini Wyzwanie

Stwórz pricing section z trzema plans.

Dodaj:

hover lift effect na cards;
button hover effect;
featured plan z subtle floating icon;
responsive layout;
reduced motion media query.

To real-world CSS motion.

Small details.

Big difference.

User może nie zauważyć każdej animation świadomie.

Ale poczuje, że interface jest smoother.

To jest dobry design.

Cicho robi swoją robotę.

Podsumowanie

Dzisiaj nauczyłeś się, że:

transitions sprawiają, że CSS changes są smooth;
transition zwykle powinno być ustawione na normal state;
transform może move, scale i rotate elements;
translateY jest useful dla hover lift effects;
scale może sprawić, że icons albo buttons czują się interactive;
box-shadow można animować dla depth;
@keyframes tworzy CSS animations;
infinite animations powinny być subtle;
nie wszystko musi się ruszać;
dobry motion wspiera usability.

Motion jest powerful.

Używaj go carefully.

Trochę movement może sprawić, że website czuje się alive.

Za dużo movement sprawia, że wygląda, jakby uciekł z cartoon.

Następna Lekcja

W następnej lekcji zakończymy kurs complete mini project.

Połączymy layout, responsive design, cards, buttons i polished styling.

CSS toolbox jest prawie gotowy.