CSS Stripes animation effect
CSS Stripes animation
The stripes animation decreases the opacity of the original HTML element in a striped pattern. Here we apply the CSS mask-image and mask-position properties. The stripes are made using the mask#linear-gradient value.
<style>
.stripes {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: stripes;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes stripes {
0% { mask-image: linear-gradient(0deg,
transparent 0%,
transparent 10%,
#FFF 15%,
transparent 20%,
transparent 30%,
#FFF 35%,
transparent 40%,
transparent 50%,
#FFF 50%,
transparent 55%,
transparent 65%,
#FFF 70%,
transparent 75%,
transparent 85%,
#FFF 90%,
transparent 95%,
transparent 100%
);
mask-position: 0px 0px;
}
50% { mask-position: 0px -50px; }
/*75% { mask-position: 0; }
100% { mask-position: 0px 50px; }*/
}
</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