Ostatnio edytowany:

animation

Autor: Virtual Patriot

Opis właściwości animation

Za pomocą właściwości animation możemy określić kilka różnych cech animacji interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości animation

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

none 0s ease 0s 1 normal none running

wyjątki initial

brak

animowanie

nie

Interpretacja właściwości animation

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości animation

grupa wartości

Opis

Za pomocą właściwości animation oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech animacji interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  animation:moja-animacja-1 4s linear 2s infinite reverse both paused;
}

/* REGUŁA - 2 */
div {
  animation-name:moja-animacja-1;
  animation-duration:4s;
  animation-timing-function:linear;
  animation-delay:2s;
  animation-iteration-count:infinite;
  animation-direction:reverse;
  animation-fill-mode:both;
  animation-play-state:paused;
}

Składniki grupy wartości właściwości animation

Ważne

pierwsza napotkana w naszym zapisie liczba wraz z jednostką czasu zawsze będzie odpowiadała za wartość składnika duration

podana przez nas grupa wartości właściwości animation nie może zawierać wartości globalnych oraz sekwencji wartości

Przykładowe zapisy

moja-animacja-1 4s

moja-animacja-1 4s infinite

moja-animacja-1 4s linear 1s 2 both

moja-animacja-1 4s linear 1s 2 both forwards running

name

Składnik name nie jest wymaganym składnikiem grupy wartości właściwości animation. Składnik name określa wartość właściwości animation-name, czyli to, która animacja powinna zostać dodana do interesującego nas elementu HTML.

Wartość domyślna

none

duration

Składnik duration nie jest wymaganym składnikiem grupy wartości właściwości animation. Składnik duration określa wartość właściwości animation-duration, czyli czas trwania wykonywania się animacji interesującego nas elementu HTML.

Wartość domyślna

0s

timing-function

Składnik timing-function nie jest wymaganym składnikiem grupy wartości właściwości animation. Składnik timing-function określa wartość właściwości animation-timing-function, czyli tempo wykonywania się animacji interesującego nas elementu HTML.

Wartość domyślna

ease

delay

Składnik delay nie jest wymaganym składnikiem grupy wartości właściwości animation. Składnik delay określa wartość właściwości animation-delay, czyli opóźnienie lub przyspieszenie w czasie pierwszego wykonania się animacji interesującego nas elementu HTML.

Wartość domyślna

0s

iteration-count

Składnik iteration-count nie jest wymaganym składnikiem grupy wartości właściwości animation. Składnik iteration-count określa wartość właściwości animation-iteration-count, czyli ilość powtórzeń wykonania się animacji interesującego nas elementu HTML.

Wartość domyślna

1

direction

Składnik direction nie jest wymaganym składnikiem grupy wartości właściwości animation. Składnik direction określa wartość właściwości animation-direction, czyli kierunek rozpoczęcia wykonywania się oraz kierunek co drugiego powtarzania wykonywania się animacji interesującego nas elementu HTML.

Wartość domyślna

normal

fill-mode

Składnik fill-mode nie jest wymaganym składnikiem grupy wartości właściwości animation. Składnik fill-mode określa wartość właściwości animation-fill-mode, czyli to w jaki sposób interesujący nas element HTML może otrzymywać dodatkowe właściwości CSS od animacji, którą posiada.

Wartość domyślna

none

play-state

Składnik play-state nie jest wymaganym składnikiem grupy wartości właściwości animation. Składnik play-state określa wartość właściwości animation-play-state, czyli wstrzymanie bądź wznowienie wykonywania się animacji interesującego nas elementu HTML.

Wartość domyślna

running

Przykład

  animation:moja-animacja-1 8s ease-in 3s infinite alternate none running;

Do przykładowego elementu "div" została dodana animacja o nazwie "moja-animacja-1" (wykonująca się 8 sekund, posiadająca tempo "ease-in", opóźniona o 3 sekundy przed pierwszym wykonaniem się, wykonująca się w nieskończoność, posiadająca odwrotny kierunek co drugiego powtarzania wykonywania się, niewpływająca na wygląd elementu HTML przed rozpoczęciem lub po zakończeniu wykonywania się oraz nieposiadająca wstrzymania), ponieważ do wspomnianego elementu "div" została dodana właściwość "animation" wraz z następującą grupą wartości: "moja-animacja-1 8s ease-in 3s infinite alternate none running".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        animation:moja-animacja-1 8s ease-in 3s infinite alternate none running;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      @keyframes moja-animacja-1
      {
        0% { transform:translateX(0); }
        100% { transform:translateX(300px); }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

sekwencja wartości

Opis

Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka grup wartości właściwości animation do interesującego nas elementu HTML możemy dodać kilka animacji o różnych cechach jednocześnie.

Przykład

  animation:moja-animacja-1 3s linear infinite reverse, moja-animacja-2 2s ease-in 4s 5 both;

Do przykładowego elementu "div" została dodana animacja o nazwie "moja-animacja-1" (wraz z różnymi indywidualnymi cechami) oraz animacja o nazwie "moja-animacja-2" (wraz z różnymi indywidualnymi cechami), ponieważ do wspomnianego elementu "div" została dodana właściwość "animation" wraz z następującą sekwencją wartości: "moja-animacja-1 3s linear infinite reverse, moja-animacja-2 2s ease-in 4s 5 both".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        animation:moja-animacja-1 3s linear infinite reverse, moja-animacja-2 2s ease-in 4s 5 both;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      @keyframes moja-animacja-1
      {
        0% { transform:translateX(0); }
        100% { transform:translateX(300px); }
      }

      @keyframes moja-animacja-2
      {
        0% { background-color:red; }
        50% { background-color:orange; }
        100% { background-color:pink; }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>