css animation alpha to display none code example
Example 1: css opacity animation
<style>
.myelement{
animation: fade-out;
}
@keyframes fade-out{
0%{
opacity: 1.0
}
100{
opacity: 0.0
}
}
</style>
Example 2: 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>