Ostatnio edytowany:

animation-delay

Autor: Virtual Patriot

Opis właściwości animation-delay

Za pomocą właściwości animation-delay możemy opóźnić lub przyspieszyć w czasie pierwsze wykonanie się animacji interesującego nas elementu HTML.

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

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

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

czas

Opis

Za pomocą właściwości animation-delay oraz dowolnej liczby wraz z wybraną jednostką czasu możemy opóźnić lub przyspieszyć w czasie pierwsze wykonanie się animacji interesującego nas elementu HTML.

Wartości dodatnie

wartości dodatnie opóźniają w czasie pierwsze wykonanie się animacji elementu HTML

Wartości ujemne

wartości ujemne przyspieszają w czasie pierwsze wykonanie się animacji elementu HTML

Przykład

  animation-delay:5s;

Pierwsze wykonanie się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest opóźnione w czasie o 5 sekund, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-delay" wraz z wartością "5s".

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-delay:5s;
        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-delay możemy określić osobny czas trwania opóźnienia lub osobny czas trwania przyspieszenia pierwszego wykonania się poszczególnej animacji interesującego nas elementu HTML.

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

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

Przykład

  animation-delay:4s, 10s;

Pierwsze wykonanie się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest opóźnione w czasie o 4 sekundy, natomiast pierwsze wykonanie się animacji "moja-animacja-2", która również została dodana do przykładowego elementu "div", jest opóźnione w czasie o 10 sekund, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-delay" wraz z następującą sekwencją wartości: "4s, 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, moja-animacja-2;
        animation-duration:4s;
        animation-delay:4s, 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); }
      }

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

  <body>

    <div>div</div>

  </body>
</html>