Question

192

Change color with css over time back and forth

rated 0 times [ 194] [ 2] / answers: 1 / hits: 29427 / 11 Years ago, tue, september 3, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacied

Add To Favorites

Follow

Total Points: 124

Total Questions: 84

Total Answers: 98

Location: Ivory Coast

Member since Sun, Mar 7, 2021

3 Years ago

stacied questions

1 Data Not updated when fetch query - React-Query?

Sat, Mar 27, 21, 00:00, 3 Years ago

1 ReactJS: How to change placeholder font size of Material Ui Autocomplete?

Sun, Oct 18, 20, 00:00, 4 Years ago

1 How to disable autocomplete on react native paper TextInput? with autoComplete=off render autocomplete=noop on the web

Sat, May 23, 20, 00:00, 4 Years ago

1 How to import geolib in React Native to calculate the distance between two points?

Wed, May 1, 19, 00:00, 5 Years ago

1 Parse HTML String to Array

Fri, Dec 21, 18, 00:00, 6 Years ago

View All

answered 11 Years ago kaley · Accepted Answer

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/