Animated Images with CSS3

For Non-Techies: The below is a technical description of how we solved a tricky HTML5/CSS3 problem for a high-tech client who couldn’t figure it out. Read on to understand how we approach these issues and how we solved this one.

A client of ours takes a series of images and dynamically creates a slideshow using basic Javascript and CSS. Their team of developers made it such that each image in the slideshow either pans left, right, up or down, or zooms in our out without any overlap. While this effect works well for some image sets, a Ken Burns effect works better for others. The difference being the images pan AND zoom while fading out between each image, which is where we come in.

“The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. The name derives from extensive use of the technique by American documentarian Ken Burns.” – wikipedia.org

The desired effect takes settings of either pan left/zoom up, left/down, right/up or right/down while seamlessly fading out between each transition.

1. Image moving right and scaling down
2. Image fades out to show the next image in the sequence
3. Next image moves left and scales up… repeat

How it’s done

The effect is achieved by using CSS keyframe animations on classes dynamically added to image tags in sequence using JavaScript. CSS animations are a feature in the latest versions of CSS3, supported by most modern web browsers. By applying the class “moving” to an image, we’re then able to define which direction set of parameters to use. In the sample CSS below, we’re telling image1.jpg to pan left while zooming in:

<img src="images/image1.jpg" class="moving leftUp" alt="Image 1">

An animation can be a series of effects or just one. In our project, we’re combining both a motion effect “kenburnsLeftUp” and a fade out effect “kenburnsFadeOut”.

.moving.leftUp{
    animation: kenburnsLeftUp, kenburnsFadeOut;
}

Though the fade out effect happens for the duration of the effect, we only want it to start it’s fade out at the final 10%. To do so, we set keyframes at specific spots. In the example below, the image is fully opaque until the last 10% of the animation, at which point it fades to 100% transparent.

@keyframes kenburnsFadeOut
{
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

The motion for each slide takes into account the size of the source image and the smaller size of the box it fits within. Though there are many ways to handle this, we were able to use these set parameters to “transform” an image’s size and position based on what direction it needs to move. In the example below, scale defines it’s size in relation to it’s original size, and translate moves the image.

@keyframes kenburnsLeftUp
{
    from {
        transform: scale(0.77) translate(-50px,-40px);
        }
    to {
        transform: scale(1) translate(0px,0px);
    }
}

The tricky part was how to transition one image, while animating, into another as it’s not a true Ken Burns effect without it. By layering the next image below the current image, we then have something to fade into. In this case, the next image will be moving right while scaling down and appears beneath the moving image while it’s animating. CSS classes are applied in the same way, i.e.: “.next.rightDown” and have their own set of animated effects for a seamless transition.

<img src="images/image2.jpg" class="next rightDown" alt="Image 2">
<img src="images/image1.jpg" class="moving leftUp" alt="Image 1">

Result

In the end, our solution worked out well and made for yet another happy client.