From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Animating content

Animating content - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

Animating content

- CSS 3 has introduced a lot of cool new features to CSS that were previously only available through JavaScript and one of these features is transitions. A CSS transition allows us to tell the browser to animate over time a transition between one state and another state in the browser. So for example, if you look at this sidebar menu we have here right now, when I hover my mouse over one of these menu items you'll see a transition happen. What's changing is the background color, the font color, and the position of the text. We are adding a padding to the text and all of this is being transitioned over a period of time within the browser. So the browser sees that the default state has no background color, black text, and no padding. And the hover state has a padding on the lefthand side, a black background color, and a white font and then we tell the browser over a period of .3 seconds we want the transition to happen and the browser will animate everything for us. So we get this…

Contents