Trigger animation on background url change

Question

I'm dynamically changing the background image of a div with Javascript.

When the image appears in the div, I want a grey-scale to color transition to happen. But it only happens the first time, if I change the image again the effect does not work.

How do I go about triggering the CSS3 animation when the background url changes ?

I'm steering clear of Jquery on this one, vanilla js only please

.slide {
width: 100%;
height: 100%;
position: fixed;
animation: filter-animation 8s;
-webkit-animation: filter-animation 8s;
}

--

@keyframes filter-animation {
    0% {
        filter: grayscale(100%);
        transition: all 8s ease;
        100% {

            filter: grayscale(0%);
        }
    }
}

JS render code:

function renderCurrentSlide() {
    document.getElementById('slide').style.background = "url('" + Image.image_data + "') no-repeat top center fixed";
    document.getElementById('image-title').innerHTML = Image.title;
    document.getElementById('image-caption').innerHTML = Image.desc;
}

HTML:

<div id="slider-container">
    <div class="slider-main">
        <div id="gallery">
            <ul class="images">
                <li class="slide" id="slide"></li>
            </ul>
        </div>
        <div class="caption-and-title-holder">
            <div id="image-title"></div>
            <div id="image-caption"></div>
        </div>
    </div>
</div>

@ScottMarcus It's basically just a CSS3 animation attached to the slide class, so this is probably why it only happens once.. Not sure how to fix tho. — SGouws, Jun 12 '17 at 21:01
Could you also add the HTML code? How are your DOM elements laid out? You could try to use Javascript to remove the class, then readd the same class to trigger the animation again. — Felix Guo, Jun 12 '17 at 21:02
Take a look at this: https://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery — Felix Guo, Jun 12 '17 at 21:03
Yes, but the animation needs a "trigger". When and how are you initiating the animation? Show all the relevant code (HTML as well.). — Scott Marcus, Jun 12 '17 at 21:04
@ScottMarcus The 'animation: filter-animation 8s;' is attached to the .slide class, I guess it's triggered on load. I've tried removing and adding a 'fade' class on each new image, but that's not working currently. — SGouws, Jun 12 '17 at 21:07
And, where is the `.slide` class in the code you've posted. And, where is the `renderCurrentSlide` function called from. Not trying to annoy you, but post *all* the relevant code, not just fragments. — Scott Marcus, Jun 12 '17 at 21:10
[Sigh] You still haven't posted the code that calls `renderCurrentSlide` or the code that declares the `Image` variable. — Scott Marcus, Jun 12 '17 at 21:24

score 3 · Accepted Answer · answered Jun 12 '17 at 21:44

You should create a class that only handles the animation and then

remove the animation class
trigger reflow
add the animation class

var images = [
  'http://dummyimage.com/500x500/ff000/ffffff?text=1',
  'http://dummyimage.com/500x500/00ff00/ffffff?text=2'
]

function renderCurrentSlide() {
  var slide = document.getElementById('slide');
  slide.classList.remove('filter-animation');
  slide.style.background = "url('" + images[0] + "') no-repeat top center fixed";
  void slide.offsetWidth;
  slide.classList.add('filter-animation');
}

//for demo only
renderCurrentSlide();
images.shift();
setTimeout(renderCurrentSlide, 10000);

.slide {
  width: 100%;
  height: 100%;
  position: fixed;
  filter: grayscale(100%);
}

.filter-animation {
  animation: filter-animation 8s forwards;
  -webkit-animation: filter-animation 8s forwards;
}

@keyframes filter-animation {
  0% {
    filter: grayscale(100%);
  }
  100% {
    filter: grayscale(0%);
  }
}

<div id="slider-container">
  <div class="slider-main">
    <div id="gallery">
      <ul class="images">
        <li class="slide" id="slide"></li>
      </ul>
    </div>
    <div class="caption-and-title-holder">
      <div id="image-title"></div>
      <div id="image-caption"></div>
    </div>
  </div>
</div>

credit: https://css-tricks.com/restart-css-animation/

Trigger animation on background url change

1 Answers1