CSS Transitions

As you can see, media queries give the developer an easy way to change the appearance of the website based on a simple property like the width of the viewing screen. By default, when the conditions for a media query are met, the changes are instantaneous. So in our example, the font size goes immediately from 32 pixels to 76 pixels as soon as the screen width hits 768 pixels.

But do you always want this change to be instantaneous? It may be more pleasing to the viewer to have a smooth transition. We can create a smooth transition by using the CSS “transition” property. The CSS transition property allows the developer to specify a time, usually in milliseconds, for a change to occur. If we want our font size to take one half seconds, then we can use the value of “500” to specify 500 milliseconds.

The transition effect has two values, first the specific property we want to target, and second the time. If we want to target all CSS properties for a style rule, then you can use “all.”

The CSS rule to target all the CSS properties of the h1 tag would be:

h1 { transition: all 2s; }

With this rule in place, any time there is a change to a CSS property for the h1 heading element, the change will take two seconds.

If we only want to target the color property, then the rule would be:

h1 { transition: color 2s; } 

In our example, we are going to go one step further, and apply the “transform” property. There are many ways to use the transform property, but we are going to use “rotate” to rotate images twice, or 720 degrees. The CSS rule to do this is:

transform:rotate(720deg); 

Wayne Joness
West Los Angeles College, cs952
Fall