From the course: CSS: Animation

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

The steps() timing function

The steps() timing function - CSS Tutorial

From the course: CSS: Animation

Start my 1-month free trial Buy for my team

The steps() timing function

“

- [Tutor] We have one last timing function to look at, and that's the steps function. Steps work a little differently than our other options for animation timing functions. And they can seem a little confusing at first, but here's how I like to picture it. The steps function essentially splits the total duration of your animation into equal blocks of time. Each one of those blocks is a step. Each of those tiny blocks also take up some amount of time, even if it's just a fraction of a second. So instead of continuous motion, your animation is divided up into a series of holds something like this. And you can use the jumpstart and jump and keywords for finer control over how the whole effect behaves. Let's create a typing on effect animation to get a feel for how steps works. The basis of this effect is to animate the width of our H1 to reveal the letters one at a time as if they're typing on. And that one at a time part,…

Contents