Autor publikacji
Virtual Patriot - Administrator

transition-timing-function

Data publikacji
Ostatnio edytowano

Przeznaczenie 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.

Informacje dodatkowe

brak

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

przeznaczenie

element HTML każdego typu, lecz nie element HTML typu table-column-group, table-column

pozycja

dowolna

dziedziczenie

nie

wartość initial

ease

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

Wyjaśnienie

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

  transition-timing-function:ease;

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

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

  <body>

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

  </body>
</html>

ease-in

Wyjaśnienie

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

  transition-timing-function:ease-in;

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

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

  <body>

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

  </body>
</html>

ease-out

Wyjaśnienie

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

  transition-timing-function:ease-out;

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

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

  <body>

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

  </body>
</html>

ease-in-out

Wyjaśnienie

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

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

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

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

  <body>

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

  </body>
</html>

linear

Wyjaśnienie

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

  transition-timing-function:linear;

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

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

  <body>

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

  </body>
</html>

step-start

Wyjaśnienie

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

  transition-timing-function:step-start;

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

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

  <body>

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

  </body>
</html>

step-end

Wyjaśnienie

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

  transition-timing-function:step-end;

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

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

  <body>

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

  </body>
</html>

steps()

Wyjaśnienie

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

  transition-timing-function:steps(20);

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

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

  <body>

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

  </body>
</html>

cubic-bezier()

Wyjaśnienie

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

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

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

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

  <body>

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

  </body>
</html>

sekwencja wartości

Wyjaśnienie

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

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

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

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

  <body>

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

  </body>
</html>