From the course: CSS: Transforms and Transitions
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Steps and delays - CSS Tutorial
From the course: CSS: Transforms and Transitions
Steps and delays
- [Instructor] I'm going to look at another way to control transition timing through the use of step transitions and transition delays. So far, all of our transitions have employed very smooth changes, and to do that, the browser broke up the differences between the initial and end state styles into a very small set of discrete steps. But sometimes, we may want to have the browser use larger steps, and that's where a step transition becomes useful. Now, in this table I have a list of different step transitions, and the progress chart is shown on the left. I have the keyword step-start, and that's going to be a transition that stays in the end state throughout the entire duration of the transition. Or I can use the keyword step-end, and then the transition stays in the initial state for the entire duration. I can also use the steps function which breaks the transition into a series of steps. Now in this case I have six discrete steps, and then with the keyword start, the first step…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.