Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

Talk about powerful new features in cascading style sheets (CSS): By pairing the :hover pseudo-class with the CSS3 transition property, you can add slick interactive features to your objects without the use of Flash, JavaScript, or jQuery!

The transition property actually has four settings, which should be written in the CSS in the following order: property, duration, timing-function, delay.

The following list describes the settings:

  • transition-property: Identifies which CSS property will alter, such as the width or height, as in transition-property:width;.

  • transition-duration: Sets the value in seconds for the transition to complete, as in transition-duration: 5s;.

  • transition-timing-function: Specifies the speed curve of the effect. Values may be set to linear, ease, ease-in, ease-out, ease-in-out, or cubic-bezier(n,n,n,n), as in this example: transition-timing-function: linear;, which is equivalent to cubic-bezier(0,0,1,1).

  • transition-delay: Determines how many seconds will elapse before the effect begins, as in transition-delay: 2s;.

In the following code example, after a 2-second delay, an orange box smoothly changes over 5 seconds from 100px to 500px wide when a visitor hovers the mouse over the


<!DOCTYPE html>
<style type="text/css">
div {
  background-color: #F90;
  transition: width 5s linear 2s;
  -moz-transition: width 5s linear 2s; /* Firefox 4 */
  -webkit-transition: width 5s linear 2s; /* Safari & Chrome */
  -o-transition: width 5s linear 2s; /* Opera */
div:hover { width:500px; }

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: