Autor publikacji
Virtual Patriot - Administrator

steps()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji steps()

Za pomocą funkcji steps() możemy określić stałe tempo składające się z określonej ilości klatek.

Parametry funkcji steps()

Przykładowe zapisy

steps(30)

steps(15, start)

steps(25, end)

frames

Parametr frames jest wymaganym parametrem funkcji steps(). Parametr frames określa z ilu klatek powinno składać się nowo tworzone stałe tempo.

Dostępne wartości

dowolna dodatnia liczba całkowita

Wartość domyślna

brak

avoid

Parametr avoid nie jest wymaganym parametrem funkcji steps(). Parametr avoid określa, która klatka budująca nowo tworzone stałe tempo powinna zostać pominięta.

Wartość domyślna

end

Dostępne wartości parametru avoid

start

Wartość start parametru avoid sprawia, że pierwsza klatka budująca nowo tworzone stałe tempo będzie pomijana.

end

Wartość end parametru avoid sprawia, że ostatnia klatka budująca nowo tworzone stałe tempo będzie pomijana.

Występowanie funkcji steps()

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

Przykład funkcji steps()

  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>

Interpretacja funkcji steps()

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 .