That will match images whose name ends in "gif", but won't match "/foo.GIF" or simply a "/foo" that is a GIF. You can't tell what content type the server thinks the image is until you get the content-type header, and you can't tell what it actually is until it's been downloaded.

It's a good 99% solution.

Most gifs being served on the web aren't .gif files anymore, but .webm or .mp4 files instead. That css wouldn't even stop half of the gifs most users see on a daily basis.

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;
    }