Ostatnio edytowany:

animation-name

Autor: Virtual Patriot

Opis właściwości animation-name

Za pomocą właściwości animation-name możemy wskazać, która animacja powinna zostać dodana do interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

nie

Interpretacja właściwości animation-name

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

none

Opis

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

Domyślnie na elemencie HTML nie jest wykonywana żadna animacja.

Przykład

  animation-name:none;

Na przykładowym elemencie "div" nie jest wykonywana żadna animacja.

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

nazwa

Opis

Za pomocą właściwości animation-name oraz nazwy istniejącej animacji (utworzonej za pomocą reguły @keyframes) do interesującego nas elementu HTML możemy dodać animację.

Przykład

  animation-name:moja-animacja-1;

Do przykładowego elementu "div" została dodana animacja o nazwie "moja-animacja-1", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-name" wraz z wartością "moja-animacja-1".

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>

sekwencja wartości

Opis

Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości animation-name do interesującego nas elementu HTML możemy dodać kilka animacji jednocześnie.

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

Przykład

  animation-name:moja-animacja-1, moja-animacja-2;

Do przykładowego elementu "div" zostały dodane dwie różne animacje jednocześnie (pierwsza o nazwie "moja-animacja-1", natomiast druga o nazwie "moja-animacja-2"), ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-name" wraz z następującą sekwencją wartości: "moja-animacja-1, moja-animacja-2".

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;
      }

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