Autor publikacji
Virtual Patriot - Administrator

cubic-bezier()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji cubic-bezier()

Za pomocą funkcji cubic-bezier() możemy określić tempo na podstawie Krzywej Béziera.

Parametry funkcji cubic-bezier()

Ważne

w układzie współrzędnych pierwszy punkt kontrolny tworzący Krzywą Béziera znajduje się zawsze w punkcie 0,0, natomiast czwarty punkt kontrolny tworzący Krzywą Béziera znajduje się zawsze w punkcie 1,1. Zobacz również cubic-bezier.com.

Przykładowe zapisy

cubic-bezier(0, 1, 1, 0)

cubic-bezier(0.43, 0.66, 0.19, 0.87)

cubic-bezier(0.7, -0.43, 0.7, 1.43)

x1

Parametr x1 jest wymaganym parametrem funkcji cubic-bezier(). Parametr x1 określa pierwszą wartość współrzędnej drugiego punktu kontrolnego tworzącego Krzywą Béziera.

Zakres wartości

0.0 - 1.0

Wartość domyślna

brak

y1

Parametr y1 jest wymaganym parametrem funkcji cubic-bezier(). Parametr y1 określa drugą wartość współrzędnej drugiego punktu kontrolnego tworzącego Krzywą Béziera.

Dostępne wartości

dowolna liczba

Wartość domyślna

brak

x2

Parametr x2 jest wymaganym parametrem funkcji cubic-bezier(). Parametr x2 określa pierwszą wartość współrzędnej trzeciego punktu kontrolnego tworzącego Krzywą Béziera.

Zakres wartości

0.0 - 1.0

Wartość domyślna

brak

y2

Parametr y2 jest wymaganym parametrem funkcji cubic-bezier(). Parametr y2 określa drugą wartość współrzędnej trzeciego punktu kontrolnego tworzącego Krzywą Béziera.

Dostępne wartości

dowolna liczba

Wartość domyślna

brak

cubic-bezier(0.1, 0.8, 0.8, 0.1)

zmiana tempa animacji elementu HTML za pomocą funkcji cubic-bezier()

Występowanie funkcji cubic-bezier()

  1. animation-timing-function
  2. transition-timing-function

Przykład funkcji cubic-bezier()

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

Tempem wykonywania się animacji "moja-animacja-1", która została utworzona za pomocą reguły "@keyframes" oraz 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:4000ms;
        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>

Interpretacja funkcji cubic-bezier()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .