Ostatnio edytowany:

animation-duration

Autor: Virtual Patriot

Opis właściwości animation-duration

Za pomocą właściwości animation-duration możemy określić czas trwania wykonywania się animacji interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

0s

wyjątki initial

brak

animowanie

nie

Interpretacja właściwości animation-duration

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

czas

Opis

Za pomocą właściwości animation-duration oraz dowolnej nieujemnej liczby wraz z wybraną jednostką czasu możemy określić czas trwania wykonywania się animacji interesującego nas elementu HTML.

Przykład

  animation-duration:10s;

Czas trwania wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", wynosi 10 sekund, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-duration" wraz z wartością "10s".

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:10s;
        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>

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-duration możemy określić osobny czas trwania wykonywania się poszczególnej animacji interesującego nas elementu HTML.

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

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

Przykład

  animation-duration:10s, 2s;

Czas trwania wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", wynosi 10 sekund, natomiast czas trwania wykonywania się animacji "moja-animacja-2", która również została dodana do przykładowego elementu "div", wynosi 2 sekundy, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-duration" wraz z następującą sekwencją wartości: "10s, 2s".

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:10s, 2s;
        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); }
      }

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

  <body>

    <div>div</div>

  </body>
</html>