CodeGym/Kursy/Frontend SELF PL/Podstawy animacji

Podstawy animacji

Dostępny

6.1 Reguła @keyframes

Animacje CSS pozwalają tworzyć skomplikowane i płynne efekty wizualne przy minimalnym wysiłku. Głównym narzędziem do tworzenia animacji w CSS jest reguła @keyframes, która określa kluczowe klatki animacji i zmiany stylów, które powinny zachodzić w każdej klatce.

Reguła @keyframes służy do tworzenia animacji, określając zmiany właściwości CSS na różnych etapach trwania animacji. Kluczowe klatki określają, jakie style będą stosowane w określonych momentach czasu w trakcie animacji.

Składnia 1:

@keyframes animation-name {
  from {
    /* początkowe style */
  }

  to {
     /* końcowe style */
  }
}

Składnia 2:

@keyframes animation-name {
  0% {
    /* początkowe style */
  }

  100% {
     /* końcowe style */
  }
}

Gdzie:

  • from odpowiada 0% czasu trwania animacji
  • to odpowiada 100% czasu trwania animacji

Przykład: Płynna zmiana koloru tła

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Animation Example</title>
    <style>
      @keyframes changeColor {
        from {
          background-color: lightblue;
        }

        to {
          background-color: lightcoral;
        }
      }

      .animated-box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        animation: changeColor 3s infinite;
      }
    </style>
  </head>
  <body>
    <div class="animated-box">Hover over me!</div>
  </body>
</html>

Wyjaśnienie:

  • reguła @keyframes changeColor określa animację, która zmienia kolor tła elementu z lightblue na lightcoral
  • właściwość animation na elemencie .animated-box wskazuje, że animacja changeColor powinna trwać 3 sekundy i powtarzać się bez końca

6.2 Kilka kluczowych klatek

Możesz użyć więcej niż dwóch kluczowych klatek, aby stworzyć bardziej skomplikowane animacje, definiując style dla stanów pośrednich.

Przykład: Ruch po przekątnej z zmianą koloru

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Keyframes Example</title>
    <style>
      @keyframes moveAndChangeColor {
        0% {
          background-color: lightblue;
          transform: translate(0, 0);
        }

        50% {
          background-color: lightgreen;
          transform: translate(100px, 100px);
        }

        100% {
          background-color: lightcoral;
          transform: translate(200px, 0);
        }
      }

      .animated-box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        animation: moveAndChangeColor 5s infinite;
      }
    </style>
  </head>
  <body>
    <div class="animated-box">Watch me move!</div>
  </body>
</html>

Wyjaśnienie:

Reguła @keyframes moveAndChangeColor określa animację, która zmienia kolor tła i pozycję elementu w trzech etapach.

  • Na 0% czasu trwania animacji element ma jasno-niebieski kolor i znajduje się w pozycji początkowej
  • Na 50% czasu trwania animacji element ma jasno-zielony kolor i przemieszcza się o 100 pikseli w prawo i w dół
  • Na 100% czasu trwania animacji element ma jasno-koralowy kolor i przemieszcza się o 200 pikseli w prawo

6.3 Przykłady prostych animacji

Przykład 1: Pulsacja

Tworzenie efektu pulsacji, gdy element płynnie zwiększa się i zmniejsza.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulsing Effect</title>
    <style>
      @keyframes pulse {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.2);
        }

        100% {
          transform: scale(1);
        }
      }

      .pulse-box {
        width: 150px;
        height: 150px;
        background-color: lightpink;
        animation: pulse 2s infinite;
      }
    </style>
  </head>
  <body>
    <div class="pulse-box">Pulsing</div>
  </body>
</html>

Wyjaśnienie:

  • reguła @keyframes pulse określa animację, która zwiększa element do 120% i przywraca go do oryginalnego rozmiaru
  • właściwość animation na elemencie .pulse-box wskazuje, że animacja pulse powinna trwać 2 sekundy i powtarzać się bez końca

Przykład 2: Obrót

Tworzenie efektu ciągłego obrotu elementu:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Effect</title>
    <style>
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      .rotate-box {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        animation: rotate 3s infinite linear;
      }
    </style>
  </head>
  <body>
    <div class="rotate-box">Rotating</div>
  </body>
</html>

Wyjaśnienie:

  • reguła @keyframes rotate określa animację, która obraca element od 0 do 360 stopni
  • właściwość animation na elemencie .rotate-box wskazuje, że animacja rotate powinna trwać 3 sekundy, powtarzać się bez końca i odbywać się z stałą prędkością (linear)
1
Zadanie
Frontend SELF PL,  poziom 24lekcja 0
Niedostępne
Ruch i kolor
Ruch i kolor
1
Zadanie
Frontend SELF PL,  poziom 24lekcja 0
Niedostępne
Pulsowanie
Pulsowanie
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy