Glitch effect without hover

Hello.

I have a glitch effect based on a codepen source, but it is only on hover and I need have it continuously - with or without hover.
glitch
glitch - hover.zip (44.5 KB)

I am aware that I often receive your great help and I would greatly appreciate your support also for this solution.

Thank you.

(Sorry, I am not finding now the original source on codepen but I will come back with an update to the post.)

In this part in the css

    .l-single-news__image-layer:hover+.l-single-news__image .c-news__image--glitch-effect {
      display: block;
      animation: 2s infinite alternate glitch-anim-2 linear;
    }

Remove the ':hover', so it will be:

    .l-single-news__image-layer+.l-single-news__image .c-news__image--glitch-effect {
      display: block;
      animation: 2s infinite alternate glitch-anim-2 linear;
    }

*Edit: And if you want to change it from looping forever, to just 30 seconds for example change the infinite to 15.

    .l-single-news__image-layer+.l-single-news__image .c-news__image--glitch-effect {
      display: block;
      animation: 2s 15 alternate glitch-anim-2 linear;
    }
4 Likes

Thank you so much! @BannerMan