Ostatnio edytowany:

transition-timing-function

Autor: Virtual Patriot

Opis właściwości transition-timing-function

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

Dodatkowe techniczne informacje o właściwości transition-timing-function

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości transition-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 transition-timing-function

ease

Opis

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

Domyślnie tempem wykonywania się efektu przejścia 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

Tempem wykonywania się efektu przejścia 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 {
        transition-duration:4s;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

ease-in

Opis

Za pomocą wartości ease-in właściwości transition-timing-function możemy sprawić, że tempem wykonywania się efektu przejścia 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

Tempem wykonywania się efektu przejścia przykładowego elementu "div" jest tempo "ease-in", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-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 {
        transition-duration:4s;
        transition-timing-function:ease-in;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

ease-out

Opis

Za pomocą wartości ease-out właściwości transition-timing-function możemy sprawić, że tempem wykonywania się efektu przejścia 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

Tempem wykonywania się efektu przejścia przykładowego elementu "div" jest tempo "ease-out", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-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 {
        transition-duration:4s;
        transition-timing-function:ease-out;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

ease-in-out

Opis

Za pomocą wartości ease-in-out właściwości transition-timing-function możemy sprawić, że tempem wykonywania się efektu przejścia 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

Tempem wykonywania się efektu przejścia przykładowego elementu "div" jest tempo "ease-in-out", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-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 {
        transition-duration:4s;
        transition-timing-function:ease-in-out;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

linear

Opis

Za pomocą wartości linear właściwości transition-timing-function możemy sprawić, że tempem wykonywania się efektu przejścia 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

Tempem wykonywania się efektu przejścia przykładowego elementu "div" jest tempo "linear", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-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 {
        transition-duration:4s;
        transition-timing-function:linear;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

step-start

Opis

Za pomocą wartości step-start właściwości transition-timing-function możemy sprawić, że tempem wykonywania się efektu przejścia interesującego nas elementu HTML będzie tempo step-start. Tempo step-start jest tempem składającym się z jednej klatki, którą ujrzymy w momencie startu.

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

Przykład

Tempem wykonywania się efektu przejścia przykładowego elementu "div" jest tempo "step-start", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-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 {
        transition-duration:4s;
        transition-timing-function:step-start;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

step-end

Opis

Za pomocą wartości step-end właściwości transition-timing-function możemy sprawić, że tempem wykonywania się efektu przejścia interesującego nas elementu HTML będzie tempo step-end. Tempo step-end jest tempem składającym się z jednej klatki, którą ujrzymy w momencie zakończenia.

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

Przykład

Tempem wykonywania się efektu przejścia przykładowego elementu "div" jest tempo "step-end", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-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 {
        transition-duration:4s;
        transition-timing-function:step-end;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

steps()

Opis

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

Przykład

Tempem wykonywania się efektu przejścia 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ść "transition-timing-function" wraz z wartością w postaci funkcji "steps()", w której to funkcji została użyta wartość "20".

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 {
        transition-duration:4s;
        transition-timing-function:steps(20);
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

cubic-bezier()

Opis

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

Przykład

Tempem wykonywania się efektu przejścia przykładowego elementu "div" jest tempo utworzone na podstawie Krzywej Béziera, ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-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 {
        transition-duration:4s;
        transition-timing-function:cubic-bezier(0.1, 0.8, 0.8, 0.1);
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>

sekwencja wartości

Opis

Jeżeli zdecydowaliśmy się na to, aby dokładnie określić, które właściwości CSS mogą brać udział w efekcie przejścia interesującego nas elementu HTML, wtedy za pomocą sekwencji kilku (oddzielonych od siebie znakiem przecinka) wartości należących do właściwości transition-timing-function możemy określić osobne tempo wykonywania się efektu przejścia dla każdej podanej przez nas właściwości CSS mogącej brać udział w efekcie przejścia interesującego nas elementu HTML.

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

Jeżeli podana przez nas sekwencja wartości właściwości "transition-timing-function" będzie zawierała mniejszą liczbę wartości niż liczba właściwości CSS mogących brać udział w efekcie przejścia elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "transition-timing-function" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

Zmiana wartości właściwości "width" biorącej udział w efekcie przejścia przykładowego elementu "div" odbywa się na podstawie tempa "ease-out", natomiast zmiana wartości właściwości "background-color" biorącej udział w efekcie przejścia przykładowego elementu "div" odbywa się na podstawie tempa "linear", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-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 {
        transition-property:width, background-color;
        transition-duration:4s;
        transition-timing-function:ease-out, linear;
        font-size:1.3em;
        padding:1em;
        min-height:80px;
        width:40%;
        color:#000;
        background-color:#AFF;
      }

      div:hover {
        width:90%;
        color:#FFF;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div>najedź na mnie kursorem myszy</div>

  </body>
</html>