display none will remove animation effect code example
Example: how to animate div display
<!-- Here's a way to animate/transition
the opacity and display of your div! -->
<style>
@keyframes fadeIn {
0% {display:none; opacity:0;}
1% {display:block; opacity:0;}
100% {display:block; opacity:1;}
}
@keyframes fadeOut {
0% {display:block; opacity:1;}
1% {display:none; opacity:1;}
100% {display: none; opacity:0;}
}
#animate {
animation-duration: 2s;
animation-iteration-count: 1;
display: none;
opacity: 0;
}
</style>
<script>
function appear() {
document.getElementById('animate').style.animationName = "example";
}
</script>
<!-- You can put anything to activate the function, by the way. -->
<button onclick="appear()"> example </button>
<!-- This div is what's being animated, which explains why the function
appear() has 'animate' in it. -->
<div id="animate"> </div>