Home/ Questions/Q 8840957
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T10:35:27+00:00

I am trying to make a background image smoothly fade in when the class

  • 0

I am trying to make a background image smoothly fade in when the class is added and fade out when the class is removed (to a div).

My current CSS (tested in Firefox only)

background : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
-moz-transition : background 0.5s ease-in-out;
background-repeat: no-repeat;
background-position: 65px center;
background-size: "contain";

But what that does is show the image fade in and move to the center from the left. I want it to already be in position when the fading in happens. How?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hard to tell without seeing your class and javascript but, from my experience with css3 transitions and animations – all of the elements in the class with the transition/animation on it are taken into effect. So you will want to have two classes to seperate the static css properties from the animating ones. Put these properties on another class for that div which is always present:
    -moz-transition : background 0.5s ease-in-out;
    background-repeat: no-repeat;
    background-position: 65px center;
    background-size: “contain”;

    Then just toggle the class which has the animation properties:
    background : url(“/PmDojo/dojox/widget/Standby/images/loading.gif”);

    So when you change the class you have say “defaultClass” class to start and then change it to “default animationClass” for toggling the animation/transition. Hope that helps?

    • 0