CSS Box Appear and Disappear animation effect
CSS Box Appear and Disappear animation
Similar to appear and disappear, the opacity of the box changes from 0 to 1 back to 0. Additionally we use the CSS transform function transform#scale the box size from 0 to 1 and back to 0.
<style>
.box-appear-and-disappear {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: box-appear-and-disappear;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes box-appear-and-disappear {
0% { opacity:0; transform: scale(0);}
50% { opacity:1; transform: scale(1);}
100% { opacity:0; transform: scale(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