How to make a image disappear and then make it appear through animation?I also want to run this animation only once.

I tried doing it with key frames by using opacity to make is appear but if I want it to appear after a delay, it becomes visible for the delay period time and then the animation of it appearing occurs.

CodePudding user response：

You can choose a events in Javascript to initiate the animation. I chose the mouseenter to make it. In css, you can set a delay of animation and in Javascript you can choose wich time to start and end the animation(you can put a setTimeout function to delay before ou after the animation). Anyway, you can make a animation just in css. See more examples to fade: Examples

document.getElementById("img-code").addEventListener('mouseenter',function(e){
  let element = this;
  element.classList.add("anim");
  setTimeout(function(){
     element.style.opacity = '0';
  },1000)
})

#img-code {
  width:70px;
  height:70px;
}
.anim {
  animation: test 1 1s ease;
}
@keyframes test {
  from:{
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<img id="img-code" src="https://www.computersciencedegreehub.com/wp-content/uploads/2016/02/what-is-coding-1024x683.jpg">

CodePudding user response：

You can use javascript and css keyframes like this;

const img = document.getElementById("img-id");
setTimeout(appear, 400);
function appear(){
  img.classList.remove("disappeared");
  img.classList.add("appeared");
}

.disappeared{
  animation: disappear .4s 1;
}
.appeared{
  animation: appear .4s 1;
}

@keyframes disappear{
  0%{
    opacity: 100%;
  }
   40%{
    opacity: 60%;
  }
   80%{
    opacity: 20%;
  }
   100%{
    opacity: 0%;
  }
}
@keyframes appear{
  0%{
    opacity: 0%;
  }
   40%{
    opacity: 20%;
  }
   80%{
    opacity: 60%;
  }
   100%{
    opacity: 100%;
  }
}

<p  id="img-id">p is just for tesing</p>

If I understood the situation true, that should work.

CodePudding user response：

Make it using css only. Please give class to your img tag. Ex: "imageFade". Then go to css and add style to it

.imageFade{
 transition: 0.6s;
 display: block;
 opacity: 1;
 }

 .imageFade:hover{
   opacity: 0;
  }