How to Use CSS3 to Create Smooth Transitions for Mouse Hover


Cascading style sheets 3Cascading Style sheets have been used to control the look and feel of a web page for years. They are useful for defining transitions in properties like the background color when the user’s mouse either hovers or focuses on an element like a link or menu option. Prior to CSS3 (Cascading Style Sheets version 3) these transitions happened instantly.

This article is a little more technical than most of my writing. It is meant for people who are comfortable writing styles in CSS.

In CSS3 there are new effects for the : hover or :focus elements that allow you to control the transitions from not having the mouse focused or hovering to focused or hovering. These new features allow you to control the CSS property (or properties) to be transitioned; the duration of the transition; the timing function of the transition; and an optional delay.

The properties in CSS format are as follows:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

These properties help you to control the smoothness of these transitions.

For instance, if you want to change the background color of a link over a period of 200 milliseconds the code would look something like

transition-property: background-color;

transition-duration: 200 ms;

The CSS code to change the background color of a box using the old method would look something like this:

#boxa {
Width: 500px;
Padding: 10px 15 px;
Background-color: #707DDD;
Color: black;
Margin-bottom: 10px;
Margin-top: 10 px;
Border-radius: 5px;
}
#boxa:hover {
Background-color: #ABB3F5;
}

 

To add the transition delay the code would like this:

#boxb {
Width: 500px;
Padding: 10px 15 px;
Background-color: #707DDD;
Color: black;
Margin-bottom: 10px;
Margin-top: 10 px;
Border-radius: 5px;
Transition-property: background-color
Transition-duration: 200ms;
}
#boxb:hover {
Background-color: #ABB3F5;
}

 

This is close to the simplest transition you can create. Change one property over some duration. The transition-timing-function property is used to define how the pace of the transition will occur. There are several keywords that help you define this property (ease, linear, ease-in, ease-out or ease-in-out).

The ease, ease-in, ease-out and ease-in-out define how quickly the transition starts or ends. A linear transition happens at the same pace throughout the transition.

You can also define a transition delay. This is the amount of time between the time the mouse hover occurs and the transition begins. This is optional.

Here is an example of changing the color of a box over 1 second, with a timing function of ease in and a delay of 1 second

#boxb {
Width: 500px;
Padding: 10px 15 px;
Background-color: #707DDD;
Color: black;
Margin-bottom: 10px;
Margin-top: 10 px;
Border-radius: 5px;
Transition-property: background-color
Transition-duration: 1s;
Transition-timing-function: ease-in;
Transition-delay: 1 s;
}
#boxb:hover {
Background-color: #ABB3F5;
}
 

Fortunately there is a shortcut code you can use. Once you understand the properties and how they work you can make your code neater. This shorthand property is:

Transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;

In the above example you could shorten the code from 4 lines to one:

Transition: background-color 1s ease-in 1s;

This is only one of the new features in CSS3 that can transform your website from ordinary to great. Engage your visitors in easier more pleasing ways with the features that are present in any browser.

Leave a Reply

%d bloggers like this: