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 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.
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.
Bonus: A Tool for Making GIFs Easily
If you need an easy way to create GIFs for making your UX delightful, give CloudApp a go.
We’ve created a cheat sheet to help you learn how to use CloudApp’s features and keyboard shortcuts quickly. Keep it at hand on your computer’s desktop or print it out, and you’ll be slinging screenshots efficiently in no time. Grab it here:
Frequently Asked Questions (FAQs) about Combining GIFs and CSS
How can I add a GIF to my CSS or HTML page?
Adding a GIF to your CSS or HTML page is quite simple. First, you need to have the GIF file that you want to add. Once you have the file, you can use the “img” tag in HTML to add the GIF. The “src” attribute of the “img” tag should be the path to your GIF file. For example, if your GIF file is named “animation.gif” and is located in the same directory as your HTML file, you can add it like this:<img src="animation.gif">
In CSS, you can use the “background-image” property to add a GIF. Here’s how you can do it:body {
background-image: url('animation.gif');}
This will set the GIF as the background image of the body element.
How can I animate a sprite sheet with CSS?
Animating a sprite sheet with CSS involves using the “background-position” property to change the position of the sprite sheet at different keyframes. Here’s a basic example:@keyframes sprite-animation {
0% { background-position: 0 0; }
50% { background-position: -100px 0; }
100% { background-position: -200px 0; }}.sprite {
animation: sprite-animation 1s steps(3) infinite;}
In this example, the sprite sheet is moved to the left by 100px at the 50% keyframe and by 200px at the 100% keyframe. The “steps(3)” value means that the animation is divided into 3 steps.
How can I blend a GIF with the background?
Blending a GIF with the background can be achieved using the “background-blend-mode” property in CSS. This property defines how the background layers (color and/or images) should blend with each other. Here’s an example:body {
background-image: url('background.jpg'), url('animation.gif');
background-blend-mode: multiply;}
In this example, the GIF (animation.gif) and the background image (background.jpg) are blended using the “multiply” blend mode.
How can I control the speed of a GIF in CSS?
Unfortunately, you cannot control the speed of a GIF directly in CSS. The speed of a GIF is determined by the frame rate that was set when the GIF was created. However, you can create a similar effect by using a sprite sheet and controlling the speed of the animation with the “animation-duration” property in CSS.
How can I make a GIF responsive in CSS?
Making a GIF responsive in CSS involves setting the width of the GIF to 100% and the height to auto. This will make the GIF scale with the width of its container. Here’s how you can do it:img {
width: 100%;
height: auto;}
In this example, all images, including GIFs, will be responsive.
How can I pause a GIF in CSS?
Pausing a GIF in CSS is not possible because the animation of a GIF is embedded in the file itself and cannot be controlled with CSS. However, you can pause an animation created with CSS using the “animation-play-state” property. Here’s an example:.sprite {
animation: sprite-animation 1s steps(3) infinite;
animation-play-state: paused;}
In this example, the animation is initially paused and can be played by changing the “animation-play-state” property to “running”.
How can I loop a GIF in CSS?
Looping a GIF in CSS is not necessary because GIFs loop by default. However, if you’re using a sprite sheet to create an animation, you can loop the animation with the “infinite” keyword in the “animation” shorthand property. Here’s an example:.sprite {
animation: sprite-animation 1s steps(3) infinite;}
In this example, the animation will loop indefinitely.
How can I change the position of a GIF in CSS?
Changing the position of a GIF in CSS can be done using the “position” property along with the “top”, “right”, “bottom”, and “left” properties. Here’s an example:img {
position: absolute;
top: 50px;
right: 50px;}
In this example, the GIF will be positioned 50px from the top and 50px from the right of its nearest positioned ancestor.
How can I add a GIF to a button in CSS?
Adding a GIF to a button in CSS can be done using the “background-image” property. Here’s how you can do it:button {
background-image: url('animation.gif');
background-size: cover;}
In this example, the GIF (animation.gif) is set as the background image of the button and scaled to cover the entire button.
How can I add a hover effect to a GIF in CSS?
Adding a hover effect to a GIF in CSS can be done using the “:hover” pseudo-class. Here’s an example:img:hover {
opacity: 0.5;}
In this example, the GIF will become semi-transparent when hovered over.
Tim BrownTim Brown is a designer and developer serving the Minneapolis web design community and focused on the disciplines of driving traffic and conversion.
