0

I am working on a legacy code here, and cannot use jQuery, CSS3 or HTML5.

I am using a background image for an input field in HTML. I am trying to achieve some sort of animation here, where the image appears initially and fades away slowly after 'n' seconds.

The sample CSS code that I have is:

.acceptValue {
  background-image: url('../../images/accept.gif');
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 20px;
}

I want the above CSS property to be applied for 'n' seconds and then it should disappear.

Is there a way I can get this working in IE7 and IE8? I want something like SetTimeout in CSS definition where the image (accept.gif) appears just for a few seconds.

Please let me know.

Shankar Raju
  • 4,356
  • 6
  • 33
  • 52
  • Just an idea: you could use javascript along with the opacity property. – Misguided Apr 17 '12 at 01:03
  • CSS is not programmable in any way. You'll have to use javascript to change the css dynamically to do the fade. I suggest using jquery, which makes that sort of animation very easy to do. But since you can't, you'll have to use bare javascript. – Marc B Apr 17 '12 at 01:06
  • I see that in CSS3, we can create some sort of these animations. Also, I can use JavaScript, however could you please tell me how to use this effect in JavaScript? – Shankar Raju Apr 17 '12 at 01:11
  • @Shankar: Have you looked at [this](http://stackoverflow.com/questions/5104053/fade-effect-using-javascript-no-jquery)? – neo108 Apr 17 '12 at 02:29
  • I would quit my job if someone asked to add eye candy to a page but forbid me to use jQuery. – Cesar Canassa Apr 17 '12 at 03:40
  • The whole container can have opacity animated with Javascript. The requirements are absurd. – Mircea Apr 17 '12 at 12:13

0 Answers0