Ostatnio edytowany:

animation-direction

Autor: Virtual Patriot

Opis właściwości animation-direction

Za pomocą właściwości animation-direction możemy określić kierunek rozpoczęcia wykonywania się oraz kierunek co drugiego powtarzania wykonywania się animacji interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

nie

Interpretacja właściwości animation-direction

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

normal

Opis

Wartość normal jest domyślną wartością właściwości animation-direction.

Domyślnie animacja elementu HTML posiada niezmieniony kierunek rozpoczęcia wykonywania się oraz niezmieniony kierunek co drugiego powtarzania wykonywania się.

Przykład

  animation-direction:normal;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada niezmieniony kierunek rozpoczęcia wykonywania się oraz niezmieniony kierunek co drugiego powtarzania wykonywania się.

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>

reverse

Opis

Za pomocą wartości reverse właściwości animation-direction możemy sprawić, że animacja interesującego nas elementu HTML będzie posiadała odwrotny kierunek rozpoczęcia wykonywania się.

Przykład

  animation-direction:reverse;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada odwrotny kierunek rozpoczęcia wykonywania się, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-direction" wraz z wartością "reverse".

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;
        animation-direction:reverse;
        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>

alternate

Opis

Za pomocą wartości alternate właściwości animation-direction możemy sprawić, że animacja interesującego nas elementu HTML będzie posiadała odwrotny kierunek co drugiego powtarzania wykonywania się.

Przykład

  animation-direction:alternate;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada odwrotny kierunek co drugiego powtarzania wykonywania się, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-direction" wraz z wartością "alternate".

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;
        animation-direction:alternate;
        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>

alternate-reverse

Opis

Za pomocą wartości alternate-reverse właściwości animation-direction możemy sprawić, że animacja interesującego nas elementu HTML będzie posiadała odwrotny kierunek rozpoczęcia wykonywania się oraz odwrotny kierunek co drugiego powtarzania wykonywania się.

Przykład

  animation-direction:alternate-reverse;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada odwrotny kierunek rozpoczęcia wykonywania się oraz odwrotny kierunek co drugiego powtarzania wykonywania się, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-direction" wraz z wartością "alternate-reverse".

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;
        animation-direction:alternate-reverse;
        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-direction możemy określić osobny kierunek rozpoczęcia wykonywania się oraz osobny kierunek co drugiego powtarzania wykonywania się poszczególnej animacji interesującego nas elementu HTML.

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

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

Przykład

  animation-direction:reverse, alternate;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada odwrotny kierunek rozpoczęcia wykonywania się, natomiast animacja "moja-animacja-2", która również została dodana do przykładowego elementu "div", posiada odwrotny kierunek co drugiego powtarzania wykonywania się, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-direction" wraz z następującą sekwencją wartości: "reverse, alternate".

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;
        animation-direction:reverse, alternate;
        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>