Most gifs being served on the web aren't .gif files anymore, but .webm or .mp4 f...

dredmorbius · on Feb 13, 2019

I can assure you that:

1. The solution as posed works remarkably well. I know this because I use it myself.[1]

2. Extending the pattern to either be case-insensitive or include other animated image formats is pathetically trivial.

________________________________

Notes:

1. Specifically, in my "Annoyances" stylesheet, applied to all sites by default:

    /* gifs: So, it has come to this ... (xkcd) */

    img[src$=".gif"] {
        opacity: 0 !important;
        transition-delay: 3s;
        transition-duration: 1s;
        transition-timing-function: ease;
        transition-property: opacity;
        display: block;
    }

    img[src$=".gif"]:hover {
        transition-delay: 0.3s;
        transition-duration: 0.3s;
        opacity: 1 !important;
    }