Autor publikacji
Virtual Patriot - Administrator

animation-timing-function

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości animation-timing-function

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

Informacje dodatkowe

brak

Informacje techniczne o właściwości animation-timing-function

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

ease

wyjątki initial

brak

animowanie

nie

Interpretacja właściwości animation-timing-function

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-timing-function

ease

Wyjaśnienie

Wartość ease jest domyślną wartością właściwości animation-timing-function.

Domyślnie tempem wykonywania się animacji elementu HTML jest tempo ease. Tempo ease od momentu startu ciągle przyspiesza, a następnie wyraźnie zwalnia przed momentem zakończenia. 

      Warto wiedzieć, że:
      - wartość "ease" jest równoznaczna z zapisem:
      "cubic-bezier(0.25, 0.1, 0.25, 1)"

Przykład

  animation-timing-function:ease;

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo "ease".

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:#7DCDE8;
      }

      @keyframes moja-animacja-1
      {
        0% { transform:translateX(0); }
        100% { transform:translateX(300px); }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

ease-in

Wyjaśnienie

Za pomocą wartości ease-in właściwości animation-timing-function możemy sprawić, że tempem wykonywania się animacji interesującego nas elementu HTML będzie tempo ease-in. Tempo ease-in od momentu wolnego startu ciągle przyspiesza. 

      Warto wiedzieć, że:
      - wartość "ease-in" jest równoznaczna z zapisem:
      "cubic-bezier(0.42, 0, 1, 1)"

Przykład

  animation-timing-function:ease-in;

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo "ease-in", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-timing-function" wraz z wartością "ease-in".

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-timing-function:ease-in;
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      @keyframes moja-animacja-1
      {
        0% { transform:translateX(0); }
        100% { transform:translateX(300px); }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

ease-out

Wyjaśnienie

Za pomocą wartości ease-out właściwości animation-timing-function możemy sprawić, że tempem wykonywania się animacji interesującego nas elementu HTML będzie tempo ease-out. Tempo ease-out od momentu szybkiego startu ciągle zwalnia. 

      Warto wiedzieć, że:
      - wartość "ease-out" jest równoznaczna z zapisem:
      "cubic-bezier(0, 0, 0.58, 1)"

Przykład

  animation-timing-function:ease-out;

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo "ease-out", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-timing-function" wraz z wartością "ease-out".

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-timing-function:ease-out;
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      @keyframes moja-animacja-1
      {
        0% { transform:translateX(0); }
        100% { transform:translateX(300px); }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

ease-in-out

Wyjaśnienie

Za pomocą wartości ease-in-out właściwości animation-timing-function możemy sprawić, że tempem wykonywania się animacji interesującego nas elementu HTML będzie tempo ease-in-out. Tempo ease-in-out od momentu wolnego startu płynnie przyspiesza do momentu wolnego zakończenia. 

      Warto wiedzieć, że:
      - wartość "ease-in-out" jest równoznaczna z zapisem:
      "cubic-bezier(0.42, 0, 0.58, 1)"

Przykład

  animation-timing-function:ease-in-out;

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo "ease-in-out", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-timing-function" wraz z wartością "ease-in-out".

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-timing-function:ease-in-out;
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      @keyframes moja-animacja-1
      {
        0% { transform:translateX(0); }
        100% { transform:translateX(300px); }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

linear

Wyjaśnienie

Za pomocą wartości linear właściwości animation-timing-function możemy sprawić, że tempem wykonywania się animacji interesującego nas elementu HTML będzie tempo linear. Tempo linear jest tempem stałym. 

      Warto wiedzieć, że:
      - wartość "linear" jest równoznaczna z zapisem:
      "cubic-bezier(0, 0, 1, 1)"

Przykład

  animation-timing-function:linear;

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo "linear", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-timing-function" wraz z wartością "linear".

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-timing-function:linear;
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      @keyframes moja-animacja-1
      {
        0% { transform:translateX(0); }
        100% { transform:translateX(300px); }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

step-start

Wyjaśnienie

Za pomocą wartości step-start właściwości animation-timing-function możemy sprawić, że tempem wykonywania się animacji interesującego nas elementu HTML będzie tempo step-start. Tempo step-start jest tempem stałym składającym się z tylu klatek (z pominięciem pierwszej klatki) z ilu selektorów składa się reguła @keyframes tworząca animację interesującego nas elementu HTML. 

      Warto wiedzieć, że:
      - wartość "step-start" jest równoznaczna z zapisem:
      "steps(1, start)"

Przykład

  animation-timing-function:step-start;

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo stałe składające się z 5 klatek (z pominięciem pierwszej klatki), ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-timing-function" wraz z wartością "step-start".

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-timing-function:step-start;
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

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

step-end

Wyjaśnienie

Za pomocą wartości step-end właściwości animation-timing-function możemy sprawić, że tempem wykonywania się animacji interesującego nas elementu HTML będzie tempo step-end. Tempo step-end jest tempem stałym składającym się z tylu klatek (z pominięciem ostatniej klatki) z ilu selektorów składa się reguła @keyframes tworząca animację interesującego nas elementu HTML. 

      Warto wiedzieć, że:
      - wartość "step-end" jest równoznaczna z zapisem:
      "steps(1, end)"

Przykład

  animation-timing-function:step-end;

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo stałe składające się z 5 klatek (z pominięciem ostatniej klatki), ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-timing-function" wraz z wartością "step-end".

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-timing-function:step-end;
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

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

steps()

Wyjaśnienie

Za pomocą właściwości animation-timing-function oraz funkcji steps() możemy sprawić, że tempem wykonywania się animacji interesującego nas elementu HTML będzie tempo stałe składające się z konkretnej ilości klatek.

Ostateczna ilość klatek uzależniona jest od podanej przez nas wartości oraz od ilości selektorów posiadanych przez regułę @keyframes tworzącą animację interesującego nas elementu HTML.

Przykładowo, gdy podamy wartość steps(10, start), a reguła @keyframes tworząca animację interesującego nas elementu HTML będzie składała się z trzech selektorów, wtedy ostateczną ilością klatek będzie ilość równa liczbie 20 (z pominięciem pierwszej klatki), ponieważ (3-1)×10=20 (od ilości selektorów reguły @keyframes zawsze odejmowana jest liczba 1).

Przykład

  animation-timing-function:steps(5);

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo stałe składające się z 20 klatek (z pominięciem ostatniej klatki), ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-timing-function" wraz z wartością w postaci funkcji "steps()", w której to funkcji została użyta wartość "5".

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-timing-function:steps(5);
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

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

cubic-bezier()

Wyjaśnienie

Za pomocą właściwości animation-timing-function oraz funkcji cubic-bezier() możemy sprawić, że tempem wykonywania się animacji interesującego nas elementu HTML będzie tempo utworzone na podstawie Krzywej Béziera.

Przykład

  animation-timing-function:cubic-bezier(0.1, 0.8, 0.8, 0.1);

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo utworzone na podstawie Krzywej Béziera, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-timing-function" wraz z wartością w postaci funkcji "cubic-bezier()", w której to funkcji zostały użyte następujące wartości: "0.1, 0.8, 0.8, 0.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-timing-function:cubic-bezier(0.1, 0.8, 0.8, 0.1);
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      @keyframes moja-animacja-1
      {
        0% { transform:translateX(0); }
        100% { transform:translateX(300px); }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

sekwencja wartości

Wyjaśnienie

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-timing-function możemy określić osobne tempo wykonywania się poszczególnej animacji interesującego nas elementu HTML.

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

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

Przykład

  animation-timing-function:ease-out, linear;

Tempem wykonywania się animacji "moja-animacja-1", która została dodana do przykładowego elementu "div", jest tempo "ease-out", natomiast tempem wykonywania się animacji "moja-animacja-2", która również została dodana do przykładowego elementu "div", jest tempo "linear", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-timing-function" wraz z następującą sekwencją wartości: "ease-out, linear".

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-timing-function:ease-out, linear;
        animation-iteration-count:infinite;
        text-align:center;
        width:160px;
        padding:0.5em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

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