CSS Appear Disappear animation effect
CSS Appear Disappear animation
Simple pure CSS animation that makes an HTML element appear and or disappear using the opacity CSS property.
<style>
.appear-disappear {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: appear-disappear;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes appear-disappear {
/* We set opacity to zero at the start
of the animation. At 50% play time,
here after 2s, the HTML element will
be fully opaque (appear). Then */
0% { opacity:0; }
50% { opacity:1;}
100% { opacity:0; }
}
</style>
- If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
- Remove the HTML style tag as needed.
- Change values in the code such as animation-duration as needed.
Animation effects source code licenced under
MIT Licence