CodeGym /Kursy /Frontend SELF PL /Podstawy animacji

Podstawy animacji

Frontend SELF PL

Poziom 24 , Lekcja 0

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)

Poprzednia Poprzednia lekcja

Następny Następna lekcja

Komentarze

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION