how to set a image disappear animation and then display a gif, Finally disappear together

Question

Show image shrink and gif in one second, then disappear together

1. i have a image.
2. after user click this image, Trigger the disappearing animation （0.5s）
3. When the animation ends, a gif is displayed on the background （0.5s）
4. Finally disappear together

like this.

Answer 1

You can have a simple html like:

<div id="myDiv">
    <img id="myImg" src="img src" alt="">
</div>

on your css you need to give the property:

#myImg {
    transition: all 0.5s ease;
}

That way there will be an animation when shrinking the image and with jquery you can do this:

$('#myImg').on('click', function() {
  $('#myImg').css('width', '50%')
  setTimeout(function() {
    $('#myDiv').css('background-image', 'url("img/cat.gif")')
    setTimeout(function() {
      $('#myImg').css('display', 'none');
      $('#myDiv').css('display', 'none')
    }, 500)
  }, 500)
})

When your img is clicked it will trigger a function where it will shrink its width but you can add new values for any width or height on the same way after a time out of 0.5s i will display a gif as bg and after another 0.5s both elems get a display none. Hope it helps