CODEWITHSUNDEEP
htmlcss
eozzy
eozzy

Reputation: 68770

CSS3 background image fade effect

I want to swap background images with the fade effect, I tried this:

    -webkit-transition: background 300ms ease-in 200ms;
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;

and it slides instead of fade. What should I change?

Thanks in advance

Upvotes: 0

Views: 736

Answers (2)

enam
enam

Reputation: 1177

Well I also looked for this effect to do with CSS3 but find no luck! Will follow up your question. I solve this issue with jQuery! Lots of plugins are available. You can check THIS page. Hope it helps you.

Upvotes: 2

Jayne Mast
Jayne Mast

Reputation: 1487

You can't really, with a transition you say "if property-x changes, make sure it takes y seconds and use z animation, delay it with n"

So if you change the background-position, the background will slide to that position. if you want it to fade you should use two different element and change the opacity of both

Upvotes: 1

Related Questions