Autor publikacji
Virtual Patriot - Administrator

animation-iteration-count

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości animation-iteration-count

Za pomocą właściwości animation-iteration-count możemy określić ilość powtórzeń wykonania się animacji interesującego nas elementu HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości animation-iteration-count

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

1

wyjątki initial

brak

animowanie

nie

Interpretacja właściwości animation-iteration-count

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-iteration-count

liczba całkowita

Wyjaśnienie

Za pomocą właściwości animation-iteration-count oraz dowolnej nieujemnej liczby całkowitej możemy określić ilość powtórzeń wykonania się animacji interesującego nas elementu HTML.

Przykład

  animation-iteration-count:2;

Wykonanie się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", zostanie powtórzone 2 razy, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-iteration-count" wraz z wartością "2".

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-name:moja-animacja-1;
        animation-duration:4s;
        animation-iteration-count:2;
        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>

infinite

Wyjaśnienie

Za pomocą wartości infinite właściwości animation-iteration-count możemy sprawić, że wykonywanie się animacji interesującego nas elementu HTML będzie powtarzane w nieskończoność.

Przykład

  animation-iteration-count:infinite;

Wykonywanie się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest powtarzane w nieskończoność, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-iteration-count" wraz z wartością "infinite".

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-name:moja-animacja-1;
        animation-duration:4s;
        animation-iteration-count:infinite;
        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

Jeżeli zdecydowaliśmy się na to, aby do interesującego nas elementu HTML dodać kilka animacji jednocześnie, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości animation-iteration-count możemy określić osobną ilość powtórzeń wykonania się poszczególnej animacji interesującego nas elementu HTML.

Podana przez nas sekwencja wartości właściwości "animation-iteration-count" nie może zawierać wartości globalnych.

Jeżeli podana przez nas sekwencja wartości właściwości "animation-iteration-count" będzie zawierała mniejszą liczbę wartości niż liczba posiadanych przez element HTML animacji, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "animation-iteration-count" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

  animation-iteration-count:2, 4;

Wykonanie się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", zostanie powtórzone 2 razy, natomiast wykonanie się animacji "moja-animacja-2", która również została dodana do przykładowego elementu "div", zostanie powtórzone 4 razy, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-iteration-count" wraz z następującą sekwencją wartości: "2, 4".

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-name:moja-animacja-1, moja-animacja-2;
        animation-duration:4s;
        animation-iteration-count:2, 4;
        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>