Właściwości animacji

7.1 Właściwość animation-name

CSS animacje pozwalają tworzyć dynamiczne i płynne efekty wizualne, ulepszając interfejs użytkownika i czyniąc go bardziej interaktywnym. Właściwości animacji pozwalają kontrolować różne aspekty animacji, takie jak nazwa, czas trwania, funkcja timingowa i opóźnienie. Teraz szczegółowo omówimy te właściwości i pokażemy, jak je używać.

Właściwość animation-name definiuje nazwę animacji, która zostanie zastosowana do elementu. Nazwa powinna odpowiadać nazwie zdefiniowanej w regule @keyframes.

Składnia:

    
      element {
        animation-name: animation-name;
      }
    
  

Gdzie:

• animation-name: nazwa animacji zdefiniowana w @keyframes

Przykład:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

Wyjaśnienie kodu:

• @keyframes moveRight: definiuje animację o nazwie moveRight, która przesuwa element w prawo
• .box: element z zastosowaną animacją moveRight

7.2 Właściwość animation-duration

Właściwość animation-duration definiuje czas trwania animacji. Wartość podawana jest w sekundach (s) lub milisekundach (ms).

Składnia:

    
      element {
        animation-duration: time;
      }
    
  

Gdzie:

• time: czas trwania animacji (na przykład, 2s dla dwóch sekund lub 500ms dla 500 milisekund).

Przykład:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

Wyjaśnienie kodu:

• animation-duration: 2s: ustawia czas trwania animacji moveRight na 2 sekundy

7.3 Właściwość animation-timing-function

Właściwość animation-timing-function definiuje prędkość zmiany animacji w czasie. Pozwala na tworzenie różnych efektów animacji, takich jak przyspieszenie, spowolnienie itp.

Składnia:

    
      element {
        animation-timing-function: function;
      }
    
  

Gdzie:

• function: funkcja timingowa określająca prędkość zmiany animacji (np. ease, linear, ease-in, ease-out, ease-in-out)

Przykład:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Wyjaśnienie kodu:

• animation-timing-function: ease-in-out: ustawia funkcję timingową dla animacji moveRight, sprawiając, że animacja jest płynna z powolnym początkiem i końcem oraz przyspieszeniem w środku

Podstawowe funkcje timingowe:

• ease: animacja zaczyna się powoli, przyspiesza do środka i zwalnia na końcu
• linear: animacja przebiega z stałą prędkością od początku do końca
• ease-in: animacja zaczyna się powoli i potem przyspiesza
• ease-out: animacja zaczyna się szybko i potem zwalnia
• ease-in-out: animacja zaczyna się i kończy powoli, przyspieszając w środku

7.4 Właściwość animation-delay

Właściwość animation-delay określa opóźnienie przed rozpoczęciem animacji. Wartość podawana jest w sekundach (s) lub milisekundach (ms).

Składnia:

    
      element {
        animation-delay: time;
      }
    
  

Gdzie:

• time: opóźnienie przed rozpoczęciem animacji (na przykład, 1s dla jednej sekundy lub 500ms dla 500 milisekund)

Przykład:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Wyjaśnienie kodu:

• animation-delay: 1s: ustawia opóźnienie przed rozpoczęciem animacji moveRight na 1 sekundę