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>
    Hints:
  • 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