Shimmer Effect Animation

Above is an example video of what the effect looks like using CSS transitions. It can be accomplished relatively easily and is completely hidden from browsers that don't support transitions.
View the demo to see it in action >>

I recently read an excellent article by Peter Gasston about creating an image shimmer/swipe effect on a website he was working on. I really liked the effect and after tinkering with how it worked I found that it used an image sprite to achieve the effect.

This inspired me to create a similar effect without the sprite, using only CSS. My goal with pretty much everything I develop is to never have to open Photoshop to edit something and this seemed like a good opportunity to try that out.

The Swipe Effect

Below is an example of the effect for browsers that don't support CSS Transitions. Otherwise check out my demo to see it in action.

How It Works

The effect is pretty simple. It moves a DIV with a CSS gradient as a background-image from left: -100% to left: 100%. Below I've highlighted the DIV with a red background to show it better:

Transition

HTML Setup

In my particular instance I wanted to use the effect on our site's logo. Here is the HTML I used:

<h1> <a href="#link"><span>Site Title</span></a> <div class="shimmer"></div> <img src="logo.png"> </h1>

Container Setup

The H1 container is setup to hold the child elements. It also uses overflow: hidden to hide the DIV with the gradient background when it isn't being shown.

h1 { display: inline-block; overflow: hidden; position: relative; }

Setting Up the Child Elements

One issue I ran into was when the DIV was sliding over the logo/anchor, the anchor was behind the DIV and wasn't clickable. I fixed this by positioning the anchor absolute and giving it a higher z-index than the DIV. I also gave both elements a height and width of 100% so it was dimension independent, something that I find in front-end development to be very important.

h1 a, h1 div.shimmer { height: 100%; width: 100%; position: absolute; top: 0px; } h1 a { display: block; z-index: 3; } h1 a span { display: none; }

The Hidden DIV

The DIV is positioned left: -100% and given a CSS background-gradient. I also used background-size on it. This could be tweaked to make the gradient and effect look different really easily. The gradient can also be quickly modified by importing the CSS into this CSS gradient generator app which is one of my favorite tools on the web.

h1 div.shimmer { background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Opera11.10+ */ background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* IE10+ */ background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* W3C */ background-repeat: repeat-y; background-size: 30% 100%; left: -100%; z-index: 2; }

The Animation/Tween

Finally, the real secret behind all of this is the code below. It moves the hidden DIV to the left: 100% and uses a CSS transition to tween the movement of the DIV.

h1:hover div.shimmer { left: 100%; -moz-transition: left .45s linear; -o-transition: left .45s linear; -webkit-transition: left .45s linear; transition: left .45s linear; }

Thanks for reading an make sure to check out my demo to see it in action.

Further Reading