Skip to content
May 30, 2010 / Cheng Han

CSS3 Color Animation

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.

Demo

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, div.click {
      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
About these ads

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: