Animate a background image ease-in-out in CSS?

Question

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?

When you change the background image are you using `background` or `background-image`? `background` is shorthand, and will overwrite `-repeat`, `-position`, `-size`, etc. — Shmiddty, Nov 16 '12 at 21:35

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Try this link with this answer. Also check out this answer, cause it may well be possible to do this with jquery.

If not, last resort may be to just position an image with z-index below all your other layers and then animate it as a regular DOM element.

edited May 23 '17 at 11:58

Community

1
1

answered Nov 16 '12 at 21:26

tonino.j

3,837
28
27

our organization does not use jQuery. We use DoJo. Maybe they have something similar. – antonpug Nov 16 '12 at 21:32
Then try with first link and my last answer. Anyway, dojo is okay if you need it for other things on your website. But to use dojo for this issue or this & couple of smaller things on a website is an overkill. Besides, you 200%, no, 400% **must** know jquery as a front end developer. At least to a degree. – tonino.j Nov 16 '12 at 21:39

score 0 · Accepted Answer · answered Nov 16 '12 at 21:42

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?

score 0 · Answer 3 · answered Jul 26 '15 at 18:52

maybe the question is closed, but i'll try to post my answer

this code should work, just use your own bg.jpg

<html>
<head>
    <title>some title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><style> 
        #bg {
            -moz-animation: bg 60s linear infinite;
            -webkit-animation: bg 60s linear infinite;
            -o-animation: bg 60s linear infinite;
            -ms-animation: bg 60s linear infinite;
            animation: bg 60s linear infinite;
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            /*backface-visibility: hidden;*/  //ORIGIN
            backface-visibility: visible;
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            /* Set your background with this */
            background: #348cb2 url("images/bg.jpg") bottom left;
            background-repeat: repeat-x;
            height: 100vh;
            left: 0;
            opacity: 1;
            position: fixed;
            top: 0;
        }
        @-moz-keyframes     bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
        @-webkit-keyframes  bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
        @-o-keyframes       bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
        @-ms-keyframes      bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
        @keyframes          bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }

        #bg {
            background-size: 2250px auto;
            width: 6750px;
        }</style>
</head>
<body>
    <div id="bg"></div>
</body></html>

Animate a background image ease-in-out in CSS?

3 Answers3