 |
New Perspectives on HTML5 and CSS3, 8th Edition Tutorial 8 |
Transition Steps
This page demonstrates how to apply transitions in discrete steps. Enter the number of steps in the steps() function on the web form and then move your mouse pointer over the transition box. The transition items will move from the start state to the end state in discrete steps rather than continuously.
Step Transitions
Set Duration
secondsTiming Options
| Step Graph | Transition Timing Function |
|---|---|
|
step-start |
Transition stays in the end state throughout the duration |
|
step-end |
Transition stays in the initial state throughout the duration |
|
steps(n, start) |
steps(, start) Breaks the transition in n discrete step(s) with the first step occuring at the start of the duration |
|
steps(n, end) |
steps(, end) Breaks the transition in n discrete steps with the last step occuring at the end of the duration |
START
Hover the Mouse Pointer over the Starting Box to Start the Transition
div#track canvas#one {transition: left border-radius filter 2s step-start;}
div#track canvas#two {transition: left border-radius filter 2s step-end;}
div#track canvas#three {transition: left border-radius filter 2s steps(6, start);}
div#track canvas#four {transition: left border-radius filter 2s steps(6, end);}
div#track canvas#two {transition: left border-radius filter 2s step-end;}
div#track canvas#three {transition: left border-radius filter 2s steps(6, start);}
div#track canvas#four {transition: left border-radius filter 2s steps(6, end);}