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 funkcjisteps()
. Parametrframes
określa z ilu klatek powinno składać się nowo tworzone stałe tempo. - avoid
-
Parametr
avoid
nie jest wymaganym parametrem funkcjisteps()
. Parametravoid
określa, która klatka budująca nowo tworzone stałe tempo powinna zostać pominięta.
Występowanie funkcji steps()
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()
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 10
-
tak
Zobacz więcej informacji o interpretacji funkcji steps().