Skip to content
May 30, 2010 / Cheng Han

CSS3 Color Animation


CSS3 Transition allows us to animate colors when an HTML element is hovered or clicked. This tutorial will show you how to achieve a similar effect as jQuery UI’s Color Animation effect. In the demo below, the background color of the DIVs will animate to red color over a period of one second when they are hovered and clicked respectively. A reverse transition occurs when the pointer exits the left DIV or the right DIV is clicked for the second time. The animation works on Chrome, Firefox 3.7+, Opera 10.5 and Safari 3.2+ onwards.


Now let us take a look at the HTML code.

    <div class="transition"></div>
    <div class="click" onclick="if (this.className=='click') { this.className='click clicked'; } else { this.className='click'; }"></div>

The two DIVs are given the class name transition and click respectively. An onclick event handler is added to the second DIV to enable the toggling of a new class clicked.

Next, we will move on to the CSS code.

    div.transition, {
      border: 1px solid #777777;
      height: 100px;
      width: 100px;
      background-color: #ffffff;
      transition: background-color 1s linear;
      -moz-transition: background-color 1s linear;    /* FF3.7+ */
      -o-transition: background-color 1s linear;      /* Opera 10.5 */
      -webkit-transition: background-color 1s linear; /* Saf3.2+, Chrome */
    div.transition:hover, div.clicked {
      background-color: #ff0000;

In the code above, transition is a shorthand property for transition-property, transition-duration, transition-timing-function and transition-delay.

transition-property specifies the name of the CSS property to which the transition is applied
transition-duration defines the length of time that a transition takes
transition-timing-function allows for a transition to change speed over its duration. value: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
transition-delay allows a transition to begin execution some period of time from when it is applied

Hence, we are animating the background-color property linearly from white (#ffffff) to red (#ff0000) over a period of one second without any delay.

Besides background-color, we can also color animate the following properties:

  • border-bottom-color
  • border-color
  • border-left-color
  • border-right-color
  • border-top-color
  • color
  • outline-color

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: