3

I have a Div named splash which is 473px wide and 139px high. It has a background image applied to it. Within the Div I have 3 other Divs.

I want the background image of the splash container div to fade in and out through different pictures.

Is there any way to achieve this using CSS3?

You can see the splash div on http://blackburnseo.com/ensor/

kapa
  • 77,694
  • 21
  • 158
  • 175
Dan
  • 71
  • 2
  • 8
  • Fade in and out how? What is the interaction causing the fading (if any)? – Kevin Peno May 19 '11 at 15:57
  • @Kevin: I suspect that he's looking for something similar to [`-webkit-animation`](http://www.webkit.org/blog/324/css-animation-2/) which doesn't *seem*, in my experiments, to work with `background-image`s (as yet, at least). If I'm right then I think that JavaScript (or one if its libraries) is the only way to implement this feature that I'm aware of. – David Thomas May 19 '11 at 16:05
  • @David, I know what could be used. However, his question isn't quite clear on what is being accomplished. For example, does he want the image to rotate with transitions one time? On page load? When a user hovers? What is the goal? – Kevin Peno May 19 '11 at 16:13
  • Sorry for being quite vague. I don't want anything to 'trigger' the animations. I want it to rotate through say 5 images with a smooth fade transitions. I have seen quite a few solutions that are possible by just using images but the difference with mine is that I want the background-image of the div to change – Dan May 19 '11 at 18:13

2 Answers2

1

CSS3 has a property/feature called 'transitions' which may be able to achieve the affect you're looking for, sans JS.

After a quick google, I believe this may be a good spot to get you started.

http://css3.bradshawenterprises.com/transitions/

I don't know how many browsers have implemented this feature, though; the other problem is that not every property supports transitions (you would probably be looking at background-position)

Bryan A
  • 3,598
  • 1
  • 23
  • 29
  • Sorry for being quite vague. I don't want anything to 'trigger' the animations. I want it to rotate through say 5 images with a smooth fade transitions. – Dan May 19 '11 at 18:12
1

It can be done using transitions, but it wont change automatically.

User must trigger transition somehow (:hover, :focus, etc).

Check the example here: http://jsfiddle.net/seler/zZCyf/

seler
  • 8,803
  • 4
  • 41
  • 54