Exploring transition options


show more Exploring transition options provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Transitions and Transforms show less
please wait ...

Exploring transition options

There's a lot more finesse to Transitions than just specifying a property and the duration. In this video I'll show you how you can make the transition more lifelike with the timing functions and even how you can control the period before the animation kicks in. Without any additional specifications, transitions start out slow, speed up and then slow down a bit before finishing, this is known as an ease transition. Taken from the animators so-called easing functions, and in a graph it looks like this.

You can modify how transitions are applied through the transition-timing-function property. There're five preset values, starting with a default ease. Next is linear, which displays the transition at a constant rate. Then there is ease-in, which starts slow and speeds up. The opposite of that is ease-out, which starts quickly and then slows down. And then there's the combination of the two ease-in-out, that starts slow, speeds up, and then slows down again.

You may notice that ease-in a...

Exploring transition options
Video duration: 4m 12s 2h 25m Intermediate

Viewers:

Exploring transition options provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Transitions and Transforms

Subject:
Web
Software:
CSS
Author:
please wait ...