Autor publikacji: Virtual Patriot - Administrator

animation

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - animation property (LV1)

Przeznaczenie 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.

Informacje dodatkowe: brak

Informacje techniczne 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`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 10
: tak

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

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

grupa wartości

Wyjaśnienie

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`

            name duration timing-function delay iteration-count direction fill-mode play-state

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.

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.

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.

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.

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.

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.

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.

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.

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:#7DCDE8;
      }

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

  <body>

    <div>div</div>

  </body>
</html>

sekwencja wartości

Wyjaśnienie

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:#7DCDE8;
      }

      @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>