Animations on background Images

Animations on background Images


i am working currently on my random quote machine. I thought about some random images, changing every time someone hits the new quote button. It nearly all worked but the transitions between my images are not smoothy. Does someone got a tip how to add smooth transition between my images?

Link to my pen:


It might not be the best way, but what I’d do is add the css property “transition” on the opacity to your background. “transition” creates a transition(duh!) when the property added to transition(here the opacity) change. In your javascript, on your button click, you change the opacity to 0(background will fade-out) then create a setTimeout of the time of your transition(so that your image change when the transition is finished), in that setTimemout you change the background-image and when the image is loaded you change the opacity to 1.

I’ll let you search on how to detect that the background-image is loaded, I found the answer on stackoverflow.

I’m not verry good to explain things so I hope it’s clear!


i will try that, but maybe because i will using Ajax for getting my random quotes i can use it to for my changing background image.