CSS Animation of a background

[TechStudio]

I’m scratching my head over this wondering if there is a fairly compliant way to do it. I have an element with 3 stacked backgrounds. I’m using Modernizr to detect if multiple bgs are possible before displaying it. But what I want to do is swap out the middle of the 3 stacked backgrounds on a timer. I’m trying to decide if this is possible with CSS transitions. Is there a way to perhaps use a cross-fade style transition and use a bit of supplemental jQuery to rotate out some classes on a timer?

I’d appreciate anyone’s thoughts to help me solidify the idea.

Or maybe I need to rethink the way I am going about this altogether.

[TechStudio]

Supplement:

What’s really putting me in a jam here is that I want to cross-fade the middle of 3 backgrounds. The reason is because of the shadowing and layering of the element’s parts. I don’t want to use multiple elements stacked if I can avoid it. Maybe I really do just need someone to tell me I’m thinking of this all wrong.

/scratches head

[TechStudio]

I think so much more than I talk/type. In my head I still don’t differentiate between transitions and animation. This would of course be an animation.

I’m tinkering too. I think it’s definitely going to take some jQuery to change the classes out. And it might be too poorly supported to implement. Thanks for spending some time on it.

[TechStudio]

Here I am having a conversation with myself again. What I wanted to do just isn’t going to work. To make the animation work you would have to ease an opacity value. You can’t set the opacity of a background image as far as I know, especially not one independent background image in a stack of three using multiple backgrounds.

Insert face into palm. I’m going about this in a totally different way.

[Author]

Posts