A color-changing LOGO picture based on CSS3 animation.

Recently I encountered with CSS3 and HTML5.

One of the charming feature of it is that we can now build animation without Flash!

So I decided to build a color-changing LOGO on my website www.xsight.com.cn.
- note that this page's content only works on web browser that support CSS3(ie. Chrome).

With the inspiration from Jsmix who built a breathing-light effect button looks like this:

Button

After his instruction, I built my own color-changing LOGO look like this:

Now I am going to tell you how to do it.

First of all, insert your logo picture where you want to place:

then give the specified ID a custom CSS like this:

#logo-img {
  width: 60px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-animation-name: logocolorchange;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes 'logocolorchange' { 
from { background-color: black; } 
50% { background-color: green; } 
to { background-color: black; }
}

The "border-radius" is used for preventing the background color overflows outside the picture, just like this(watch carefully at the edge of the picture):

Here are some other Properties you might find useful:

Property	value
animation-name	name
animation-duration	time
animation-timing-function	ease、linear ..
animation-iteration-count	infinite、number
animation-direction	normal | alternate
animation-delay	time

Reference:

• W3C --- Animations
• Safari Reference Library --- Animations