Design & UX
By Tim Brown

5 Ways to Delight with UX Details Combining GIFs and CSS

By Tim Brown

GIF - Muybridge

User Experience is not only about Usability but also about making your product or website pleasant to use and even delightful. One way you can create a delightful experience on your site is to create meaningful transitions, interactive or visual elements that match the look and feel of your site, and one way to accomplish this is combining GIF’s and CSS.

With a number of examples below you can consider how you might use GIF’s and CSS in a modern and stylish way – not to distract or even impress, but just to create better experiences. GIF’s aren’t just for cats and spamming your coworkers on slack anymore.

Here are 5 example utilizing GIFs and CSS in web design that might help you delight the visitors to the sites you design and develop:

1. Making a GIF play on rollover

Whether it’s icons displaying your differentiating features or an icon you want communicate meaning to your site visitor – one pleasant and fairly simple way to do this is with GIFs and CSS. You can have a static starting version of the GIF as the background, and then when someone rolls over the area, swap it out with the animated GIF version.

<div class="play-GIF-on-hover"></div>
.play-GIF-on-hover {
    width: 200px;
    height: 200px;
    background-image: url('path-to-your-folder/this-is-the-static-version.GIF');
    background-size: 100%;
    background-position: center center;
.play-GIF-on-hover:hover {
    background-image: url('path-to-your-folder/this-is-the-animated-version.GIF');

2. Using them as a GIF Preloader

If you’ve never created the CSS for a preloading overlay before, you will need to create the HTML and the CSS that constitutes the overlay screen first. You can then position your own custom pre-loader GIF over the top of it. If you don’t have a preloader GIF queued up, Codrops has a very nice set of them you can check out here (examples below.)


If you need more information on how to make solid GIFs check out “7 Tips For Designing Awesome Animated GIFs

3. Create an animated menu

Giphy Navigation

Giphy recently replaced their menu, but this previous version of it was brilliant (and topical!) Giphy’s menu plays a GIF on Roll over and gives you an idea of the kind of content you would see behind door number one, two, three and so on. The trick here is to keep things fairly subtle and not too ‘in your face’ lest you make it feel a bit cheap.

4. As a background like HeadScape

Once again, subtlety is key here. Instead of going for a really in your face set of movements within the GIF – they only have a couple indication of live action. This allows the viewer to not notice, and then discover that something is moving in the background, perhaps pleasantly surprising them on closer inspection.

Technically, this is a nice example of what is known as a GIF ‘cinemagraph’ and weighs in at a fairly respectable 1MB. However, if you want to get much fancier with the animation, this may be a better job for a video background (30-40 second tops) that loops.

Gif Animation

This is what that background looks like in context – as a sort of billboard/hero section, and of course using – background: cover with CSS keep its dimensions fitting in the space.


Although GIF doesn’t typically compress moving imagery like this as well as standard video, it does have one great advantage – variable frame rates. This means you can set a single frame to display for 2 minutes before suddenly animating and then resetting. Overlapping several semi-transparent GIFs with different timings can produce interestingly random results.

5. Hover states on your buttons

Now, because there are no hover states on mobile sites, that limits the applications here. You might want to use this on a site where you can incorporate a more subtle GIF with a light looping pattern that’s moving softly, to increase the interactive feeling without it looking cheesy.

Just because something is not available to use on mobile, doesn’t mean you totally forget ways to progressively enhance on desktop, without making it something crucial to navigation or overall functionality.


Code snippet, originally here.

GIFs aren’t just for decoration

As with any design detail, it’s important to not get wrapped up in adding frills just for the sake of our own creative indulgence. Whenever I add a feature utilizing GIFs and CSS, I want to make sure that I’m doing it to improve communication. The hover state above indicates some type of meaning, helping a visitor know they are indeed hovering over a button – and it might even make them curious what will happen when they take the next step.

Every detail we add to a design should help communicate meaning and lead the visitor down the path we’d like them to take – or at least make it easier and more enjoyable to get where they want to go.

Some Final Thoughts

With the love of GIFs in a kind of renaissance, I think they have a place amongst all of the new SVG animations and CSS post processors, if for nothing else that ease of use and the level of detail that you can reach – up to even short video like GIFs. Keep them in your arsenal to create cool little details like those above.

  • Stuart

    Question re. swapping image for animated gif on rollover: unless you preload the animated gif, won’t there be a small delay as it downloads? You won’t see this when working locally, but you will when your page is hosted on an external server somewhere. I remember when this used to be another reason for using sprited images :)

    • That’s a good point, Stuart. I remember using JS to preload images year ago, but creating a GIF sprite seems simpler.
      You would just need to make sure you didn’t get that ‘dithered sparkle’ on the static sprite when compressing.

  • Don Droga

    You mean UI not UX!

    • The process you use to make load times seem shorter or less annoying for users is a UX detail – implemented in this case via the UI using GIF & CSS.

      • Don Droga

        Is it? I don’t think so. It’s a UI detail. UX would definitely have a say in it but once it’s in design it’s UI under Motion Design. It’s ok to not know what you are talking about. Anyway get it right b4 spouting off :)

      • Don Droga

        “UI Motion : Can You Tell a Story with Movement?” Isn’t that by you. I’m not sure how you became a UX editor. Just another UX wannabe.

      • Don Droga

        It’s not even a microinteraction for that matter. I’m so over these self proclaimed ‘experts’.

      • Don Droga

        Context. All of these global rules are bullshit.

    • Tim Brown

      UX and UI are not altogether separate Don. The User Experience also includes how the design makes people feel… i.e. the interactivity and emotional aspects of the design.

      • Don Droga

        You guys down under have got things arse-up!

Get the latest in Design, once a week, for free.