0

I am trying to perform a animation of background image changing the div class. The animation seems that works at first, when I change the class the animation is done perfectly. However when I change the class again while the animation is running, it stops inmediately and last class is set (without animation).

I did the same with colors instead of images and when I changed the div class while animation was running, the new animation was "interpolated" with the previous one.

There is some way to solve this??

Here is a snippet where you can reproduce it:

.base-class {
  transition: background linear 1s;
}

.base-class.green {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Flag_of_Libya_(1977-2011).svg/1280px-Flag_of_Libya_(1977-2011).svg.png");
}

.base-class.lightblue {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/2000px-F1_light_blue_flag.svg.png");
}

.base-class.yellow {
  background: url("https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300");
}

.base-class.green2 {
  background: green;
}

.base-class.lightblue2 {
  background: lightblue;
}

.base-class.yellow2 {
  background: yellow;
}

.base-class.my-class {
  color: red;
  font-size: 3em;
}
<html>

<head>
</head>

<body>
  <h1>With Images</h1>
  <div>
    <input type="button" value="clear" onclick="document.getElementById('target1').className = 'base-class';">

    <input type="button" value="my-class" onclick="document.getElementById('target1').className = 'base-class my-class';">

    <input type="button" value="green" onclick="document.getElementById('target1').className = 'base-class green';">

    <input type="button" value="lightblue" onclick="document.getElementById('target1').className = 'base-class lightblue';">

    <input type="button" value="yellow" onclick="document.getElementById('target1').className = 'base-class yellow';">
    <br>
    <div id="target1" class="base-class">
      <br><br><br><br><br> Sample Text
      <br><br><br><br><br>
    </div>
  </div>
  <h1>With Colors</h1>
  <div>
    <input type="button" value="clear" onclick="document.getElementById('target2').className = 'base-class';">

    <input type="button" value="my-class" onclick="document.getElementById('target2').className = 'base-class my-class';">

    <input type="button" value="green" onclick="document.getElementById('target2').className = 'base-class green2';">

    <input type="button" value="lightblue" onclick="document.getElementById('target2').className = 'base-class lightblue2';">

    <input type="button" value="yellow" onclick="document.getElementById('target2').className = 'base-class yellow2';">
    <br>
    <div id="target2" class="base-class">
      <br><br><br><br><br> Sample Text
      <br><br><br><br><br>
    </div>
  </div>
</body>

</html>
vgc
  • 115
  • 1
  • 7
  • Actually it is not a good idea to animate (transition in your case) the background image from one source to another. Background image is not an animatable or transitionable property as per CSS spec. Refer this thread for potential pitfalls - http://stackoverflow.com/questions/35994521/background-image-in-keyframe-does-not-display-in-firefox-or-internet-explorer/36005661#36005661 – Harry Feb 22 '17 at 16:14
  • `.base-class` has no `background` property. So it can't animate it. Also, as @Harry mentioned, `background` is not animatable or transitionable according to the spec. – Luuuud Feb 22 '17 at 16:19
  • @LuudJacobs on "With Images" section if you press "green" button the color is set suddenly, but if you press "yellow" when it is green you can see the animation. In other hand on "With Colors" section if you press "green" button you see the animation, then when you press "yellow" you see next animation (like "With Images"). When you press for example "green" again and before animation ended you press "yellow" again, in "With Images" section yellow to green animation is stopped and yellow color is set, but in "With Colors" sections the animation yellow to green is "modified" to finish in yellow – vgc Feb 22 '17 at 17:10
  • Thanks you @Harry, I will check it – vgc Feb 22 '17 at 17:10

1 Answers1

0

I tested in Android default, iOS safari and Windows Chrome browsers and it had the same behaviour (animation was done, but not while other one was running), however in Internet Explorer did not do anything.

Like @Harry said, "background-image" property does not support css animations at first, it can work in some browsers but it is not a standard, so I must find a alternative.

vgc
  • 115
  • 1
  • 7