CSS Stripes Diagonal Left Top to Bottom Right animation effect
CSS Stripes Diagonal Left Top to Bottom Right animation
The diagonal 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-diagonal-left-top-to-bottom-right {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: stripes-diagonal-lt2br;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes stripes-diagonal-lt2br {
0% { mask-image: linear-gradient(-45deg,
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