Search code examples
cssfadeincss-transitionscss-animations

Different CSS transition for *IN* and *OUT* (or returning from transitioned state)

I have a loading image which comes up during an Ajax load event. The image shows/hides by adding or removing a "loading" class to the body element. Currently, the loading image animates background-size from 0 to 100%, and fades in the opacity (vice versa for the 'return' transition).

I want to have the background-size transition happen instantly (not transition) on the fade out, so:

  • Fade in: opacity from 0 to 1 in .2s, background size from 0 to 100% in .2s

  • Fade out: opacity from 1 to 0 in .2s, background size from 100% to 0 should happen instantly

     #loader {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: -1;
     opacity: 0;
     -moz-opacity: 0;
     transition: all .2s ease-in-out
 }


 #loader .image {
     width: 400px;
     height: 138px;
     display: block;
     position: absolute;
     z-index: 2000; 
     top: 50%; 
     left: 50%; 
     margin: 0;
     background: url(assets/images/loading.png) no-repeat;
     background-size: 0 0;
     transition: all .2s ease-in-out;
     -webkit-animation: pulse 400ms ease-out infinite alternate;
     -moz-animation: pulse 400ms ease-out infinite alternate;
     -o-animation: pulse 400ms ease-out infinite alternate;
     animation: pulse 400ms ease-out infinite alternate
 }

 .loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}

 .loading #loader .image {
     background-size: 100% 100%; 
     margin: -69px 0 0 -200px;
     transition: opacity .2s ease-in-out
 }

I've changed transition property for this selector .loading #loader .image to "opacity" rather than "all", but it still performs the background-size transition.

Does anyone know how to achieve the different fade in and fade out transitions described above with CSS?

Solution

  • Here is a simplified test case:

    div {
    background: blue;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

div.loading {
    opacity: 1;
    background: red;
    transition: opacity 2s ease-in-out, background 1s ease-in;
}

    Notice how the opacity fades the same in and out, but the background only fades in, and immediately turns blue on fade out.

    I used :hover as an example, but it should work the same when adding and removing classes with JavaScript.

    Demo

    If you'd like a more specific example please provide a reduced test case on dabblet or Jsfiddle.