Ostatnio edytowany:

animation-play-state

Autor: Virtual Patriot

Opis właściwości animation-play-state

Za pomocą właściwości animation-play-state możemy wstrzymać bądź wznowić wykonywanie się animacji interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości animation-play-state

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

running

wyjątki initial

brak

animowanie

nie

Interpretacja właściwości animation-play-state

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-play-state

running

Opis

Wartość running jest domyślną wartością właściwości animation-play-state.

Domyślnie wykonywanie się animacji elementu HTML nie jest wstrzymane.

Przykład

  animation-play-state:running;

Wykonywanie się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", nie jest wstrzymane.

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

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

  <body>

    <div>div</div>

  </body>
</html>

paused

Opis

Za pomocą wartości paused właściwości animation-play-state możemy sprawić, że wykonywanie się animacji elementu HTML zostanie wstrzymane.

Przykład

  animation-play-state:paused;

W momencie gdy kursor myszy znajdzie się nad obszarem przykładowego elementu "div" wykonywanie się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", zostanie wstrzymane, ponieważ do wspomnianego elementu "div" zostanie dodana właściwość "animation-play-state" wraz z wartością "paused".

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

      div:hover {
        animation-play-state:paused;
      }

      @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-play-state możemy określić wstrzymanie wykonywania się bądź wznowienie wykonywania się poszczególnej animacji interesującego nas elementu HTML.

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

Jeżeli podana przez nas sekwencja wartości właściwości "animation-play-state" 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-play-state" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

  animation-play-state:paused, running;

W momencie gdy kursor myszy znajdzie się nad obszarem przykładowego elementu "div" wykonywanie się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", zostanie wstrzymane, natomiast wykonywanie się animacji "moja-animacja-2", która również została dodana do przykładowego elementu "div", nie zostanie wstrzymane, ponieważ do wspomnianego elementu "div" zostanie dodana właściwość "animation-play-state" wraz z następującą sekwencją wartości: "paused, 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-name:moja-animacja-1, moja-animacja-2;
        animation-duration:4s;
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div:hover {
        animation-play-state:paused, running;
      }

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