Ostatnio edytowany:

animation-fill-mode

Autor: Virtual Patriot

Opis właściwości animation-fill-mode

Za pomocą właściwości animation-fill-mode możemy określić w jaki sposób interesujący nas element HTML może otrzymywać dodatkowe właściwości CSS od animacji, którą posiada. Mowa tu o momencie, gdy animacja elementu HTML nie rozpoczęła się jeszcze wykonywać lub gdy animacja elementu HTML zakończyła już swoje wykonywanie się.

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

nie

Interpretacja właściwości animation-fill-mode

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-fill-mode

none

Opis

Wartość none jest domyślną wartością właściwości animation-fill-mode.

Domyślnie przed momentem rozpoczęcia pierwszego wykonania się animacji lub w momencie zakończenia ostatniego wykonania się animacji element HTML nie otrzymuje żadnych dodatkowych właściwości CSS od animacji, którą posiada.

Przykład

  animation-fill-mode:none;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się, jak również w momencie zakończenia ostatniego wykonania się nie przekazuje żadnych dodatkowych właściwości CSS do przykładowego elementu "div".

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-delay:5s;
        text-align:center;
        width:160px;
        padding:2em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      @keyframes moja-animacja-1
      {
        0% { background-color:blue; }
        25% { background-color:green; }
        50% { background-color:red; }
        75% { background-color:orange; }
        100% { background-color:pink; }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

backwards

Opis

Za pomocą wartości backwards właściwości animation-fill-mode możemy sprawić, że przed momentem rozpoczęcia pierwszego wykonania się animacji interesujący nas element HTML otrzyma wszystkie właściwości CSS występujące w pierwszym selektorze należącym do reguły @keyframes tworzącej animację wspomnianego elementu HTML.

Przykład

  animation-fill-mode:backwards;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się przekazuje właściwość "background-color" wraz z wartością "blue" do przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-fill-mode" wraz z wartością "backwards".

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-delay:5s;
        animation-fill-mode:backwards;
        text-align:center;
        width:160px;
        padding:2em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      @keyframes moja-animacja-1
      {
        0% { background-color:blue; }
        25% { background-color:green; }
        50% { background-color:red; }
        75% { background-color:orange; }
        100% { background-color:pink; }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

forwards

Opis

Za pomocą wartości forwards właściwości animation-fill-mode możemy sprawić, że w momencie zakończenia ostatniego wykonania się animacji interesujący nas element HTML otrzyma wszystkie właściwości CSS występujące w ostatnim selektorze należącym do reguły @keyframes tworzącej animację wspomnianego elementu HTML.

Przykład

  animation-fill-mode:forwards;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", w momencie zakończenia ostatniego wykonania się przekazuje właściwość "background-color" wraz z wartością "pink" do przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-fill-mode" wraz z wartością "forwards".

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-delay:5s;
        animation-fill-mode:forwards;
        text-align:center;
        width:160px;
        padding:2em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      @keyframes moja-animacja-1
      {
        0% { background-color:blue; }
        25% { background-color:green; }
        50% { background-color:red; }
        75% { background-color:orange; }
        100% { background-color:pink; }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

both

Opis

Za pomocą wartości both właściwości animation-fill-mode możemy sprawić, że przed momentem rozpoczęcia pierwszego wykonania się animacji interesujący nas element HTML otrzyma wszystkie właściwości CSS występujące w pierwszym selektorze należącym do reguły @keyframes tworzącej animację wspomnianego elementu HTML, natomiast w momencie zakończenia ostatniego wykonania się animacji interesujący nas element HTML otrzyma wszystkie właściwości CSS występujące w ostatnim selektorze należącym do reguły @keyframes tworzącej animację wspomnianego elementu HTML.

Przykład

  animation-fill-mode:both;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się przekazuje właściwość "background-color" wraz z wartością "blue" do przykładowego elementu "div", natomiast w momencie zakończenia ostatniego wykonania się przekazuje właściwość "background-color" wraz z wartością "pink" do przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-fill-mode" wraz z wartością "both".

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-delay:5s;
        animation-fill-mode:both;
        text-align:center;
        width:160px;
        padding:2em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      @keyframes moja-animacja-1
      {
        0% { background-color:blue; }
        25% { background-color:green; }
        50% { background-color:red; }
        75% { background-color:orange; }
        100% { background-color:pink; }
      }
    </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-fill-mode możemy określić w jaki sposób interesujący nas element HTML może otrzymywać dodatkowe właściwości CSS od poszczególnych animacji, które posiada.

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

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

Przykład

  animation-fill-mode:none, both;

Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się, jak również w momencie zakończenia ostatniego wykonania się nie przekazuje żadnych dodatkowych właściwości CSS do przykładowego elementu "div", natomiast animacja "moja-animacja-2", która również została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się przekazuje właściwość "background-color" wraz z wartością "red" do przykładowego elementu "div", natomiast w momencie zakończenia ostatniego wykonania się przekazuje właściwość "background-color" wraz z wartością "pink" do przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-fill-mode" wraz z następującą sekwencją wartości: "none, both".

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:5s;
        animation-fill-mode:none, both;
        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>