DEV Community

Discussion on: How to create Pure CSS Glitch Animation 🤖 for Images and SVG

Collapse
 
kerthin profile image
Roden

Yes, I wanted to use filters, but in my opinion it was better to use images, because CSS filters require some performance of the browser itself to render these same filters. This means that there may be performance problems on mobile versions if the site uses several similar elements that have CSS filters. But you are absolutely right that it is often better to use filters instead of multiple images.

Collapse
 
grahamthedev profile image
GrahamTheDev

I think you would be fine with a filter on an image as I am (almost) certain that the browser will apply the filter once and then cache the image as we don't change the filters.

It is a good point though and probably one that would need testing if you use this extensively. 👍

I realised I didn't say it in the original comment, but the way you implemented it is great, one of the better glitch effects I have seen!

Thread Thread
 
kerthin profile image
Roden

Thank you. I should supplement the article and point out the possibility of using a filter instead of images, although people can use your comment as one of the options for implementing pseudo-elements without images. 😁 Thank you for your detailed opinion about the post. 😊