Ostatnio edytowany:

animation-iteration-count

Autor: Virtual Patriot

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

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

przeznaczenie
  • element HTML każdego typu
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

Opis

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

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

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

  <body>

    <div>div</div>

  </body>
</html>

infinite

Opis

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

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

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

  <body>

    <div>div</div>

  </body>
</html>

sekwencja wartości

Opis

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

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

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