Change color with css over time back and forth

Question

I was wondering if someone could help me change the color of a div from black to white after two seconds, then from white to black after two seconds, back again and so on as long as the div exists. Putting it other way, the div is only shown whenever a user clicks and drags a surface (just like the desktop selection area) and my objective is to change the color of the borders as described above while the user is still making his selection on the surface just as resizing the div.

Solution 1

If your browser requirements allow you to use css3 you don't need any javascript at all.

HTML:

<div class="blinkdiv">
</div>

CSS:

@-webkit-keyframes blackWhite {  
  0% { background-color: white; }
  50% { background-color: white; }
  51% { background-color: black; }
  100% { background-color: black; }
}

.blinkdiv {
    height: 100px;
    background-color: black;
    -webkit-animation-name: blackWhite;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-duration: 2s; 
}   

Here's an example: http://jsfiddle.net/tommcquarrie/w3Qy9/1/

Solution 2

This will transition the background color from black to white after every 2 seconds, and repeat..

body {
    -webkit-animation:name 2s infinite;
}

@-webkit-keyframes name {
    0% {background-color:black;}
    100% {background-color:white;}
}

jsFiddle demo.. haven't tested it in many browsers.. works in Chrome.