Introduction to Transition Basics in CSS for the Web


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

Transition basics

Let's start with a completely over the top but totally justified statement. CSS Transitions bring life to your web pages, and I mean that pretty literally. The WC group that's putting together the recommendation for CSS Transitions--which as of this recording is at the Working Draft state--says that CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. In other words, a CSS transition animates the change in a CSS property like background color, and to animate is to give life.

Therefore, CSS Transitions bring a breath of life to your web pages. Basic transitions are pretty straight forward to code. Let's start with a simple example, a links background color. Here we have a couple of CSS rules for an anchor tag. Let's start with an orange background color. When the user's mouse hovers over the link, the background color changes to blue. When you see this in action, it looks just like an off/on switch, pretty mechanical. To create a transit...

Transition basics
Video duration: 3m 47s 2h 25m Intermediate

Viewers:

Transition basics 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 ...