CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
Goku
Goku

Reputation: 1840

CSS3 background image color transition effect for an image or more

I'm trying to do something like a warning effect over a image, and change the image to a red color softly, every some time, but it doesn't work,this only disappear...
Please could somebody help me with this?

HTML:

<span id="test" class="ui-icon ui-icon-info state1"></span>

CSS:

.state1 {
    background-color: red;
    position: absolute;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    transition-property: background-color;
    transition-duration: 2s;
    transition-timing-function: ease;
}

.state2 {
    background-color: white;
    position: absolute;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    transition-property: background-color;
    transition-duration: 2s;
    transition-timing-function: ease;
}

JS:

var f = document.getElementById('test');
f.addEventListener("transitionend", updateTransition, true);

 function updateTransition() {
  var el = document.querySelector("span.state1");

  if (el) {
    el.className = "state2";
  } else {
    el = document.querySelector("span.state2");
    el.className = "state1";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

Is convenient do something like this?, or is most reliable do a gif image with this effect?

Thinking that gif image have a poor resolution and also I want put a large list of items like this [20x web page] and I have several SetInterval() functions to update some fields.

FIDDLE: http://jsfiddle.net/JtpxD/1/

Thanks

Upvotes: 1

Views: 493

Answers (2)

TastySpaceApple
TastySpaceApple

Reputation: 3175

changing the className

el.className = "state2";

resets the classes, so you lose the ui-icon ui-icon-info classes. you'd want

el.className = "ui-icon ui-icon-info state2";

jsfiddle: http://jsfiddle.net/SpacePineapple/ztEk5/

Upvotes: 1

tweray
tweray

Reputation: 1003

Is this what you want? http://jsfiddle.net/MxAX9/1/

basically your code

el.className = "state2";

replaced all class for the span to "state2", i.e. "ui-icon", "ui-icon-info" will be removed

Upvotes: 1

Related Questions