Using CSS keyframes with images to create unique website header

I recently launched a rebuild of 1800 Printing, one of the big printing stores in New York.

For the homepage hero section, our team made a design where the business cards and print materials load first, then the designs fade in later to show how the cards look before and after printing.

The effect looks cool, but is in fact, very very simple. It's just 2 images, with the second one containing the design on the cards, fading in over the top using some quick CSS tricks.

Stack 2 identical sized images on top of each other using position: absolute;

Then the second img (#img2) we've used this CSS keyframe sequence, to fade in and out:

#img2 {
  animation-name: fade;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  animation-direction: normal;
}

@keyframes fade {
  0% {opacity: 0; }
  15% {opacity: 0; }
  28% { opacity: 0; }
  40% { opacity: 1; }
  65% { opacity: 1; }
  73% { opacity: 0; }
  100% {opacity: 0; }
}

That's it!

See it in action:
Large Format Printing
Poster Printing
Menu Printing
Online Printing Services

Comments

[Colin Fahrion]

I didn’t see the animation at first as I was looking at it on my iPad and looks like it doesn’t work on there. Checked the desktop and it looks great but you should QA it elsewhere. Also note that portrait mode on the iPad has the text overlay the image in a way that makes it hard to read.

[SeanAUS120]

Thanks for the heads up. Checking it now on iPad :)