Keith Norman

Note: This is webkit only. Here’s a demo of this effect.

Here’s sliced out view of the layers we’re working with:

So, we have a “highlighted” layer that sits on top – this is the Beatles photo in this instance. Under that is an overlay div with width and height of 100%, and then below that is the rest of your website.

The z-index of the highlight content just needs to be set to a higher number than the overlay. Then we use a webkit-animation with keyframes to fake the initial delay:

#overlay {

  -webkit-animation-duration: 4s;

  -webkit-animation-iteration-count: 1;

  -webkit-animation-name: fadeOut;

  -webkit-animation-timing-function: ease-in-out;

  background: #fff;

  height: 0;

  left: 0;

  opacity: 0;

  position: absolute;

  top: 0;

  width: 0;

}



@-webkit-keyframes fadeOut {

0% {

  height: 100%;

  width: 100%;

  opacity: 1;

}



50% {

  height: 100%;

  width: 100%;

  opacity: 1;

}

99% {

  height: 100%;

  width: 100%;

}

100%{

  height: 0;

  width: 0;

  opacity: 0;

}

}

We are including width and height in the animation because we need to overlay div to be essentially removed from the page at the end of the animation. Using keyframes this way, and not starting the width and height animation until the 99% point, makes it so this transition happens in an unnoticeable way. The initial key frame at 50% is just meant to fake the delay that happens when you first hit the page and when the animation actually starts.

Note: there is a -webkit-animation-delay property, but if we were to use that, the overlay would have to be set to an opacity of 1 initially and thus would reset to one once the animation finished running. The keyframe delay gets around this issue.

That’s really about all there is to it. I also added some key frame based animations on the “Now on iTunes” titles that fade in after the image, and those are done in a similar way. Mainly I just wanted to play with these webkit animations and recreate a simple effect that I thought was kind of cool. Hope it was helpful!

Tagged: css3, webkit, webkit-animation