June 21, 2016

461 Views

Ken Burns Animation with CSS3 @ Keyframes

Few years ago, I got a chance to work on a flash animation project in my previous organization. The project was called Ken Burn effect Animation. The Name Ken Burns is interesting, because it signifies the 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. It was very easy and simple to develop this in Flash program. If you have basic knowledge of flash program, you must have recalled it. The photos just needed direction to move like, from left to right, top to bottom, right to left, bottom to top, zoom in and zoom out etc. I created an amazing ken burn effect animation, and I was very excited to show this project to the customer. After all, this was my first Flash animation project to create ken burns effects. I tested this ken burns animation properly and sent it to the customer. But, unfortunately, when the customer browsed it, they couldn’t see anything. It was just a blank page for them. The Flash player plugin was not installed on the machine on which he was accessing the animation. The customer was sad and instantly took a call that we will not use Flash in our project.

I was very sad that my efforts didn’t pay. Thinking about it, if there could have been a way to have ken burns animation seen without the support of any 3rd party integration. And, fortunately, after couple of years, W3C announced CSS3. Surprisingly, CSS3 has added so many new and awesome things that you can’t even imagine and one of these is the CSS3 Key frame animation.

CSS3 Keyframes

It is an animation that lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

I would like to show you how we can create CSS3 animation and how it works. Lets start with keyframes. I am going to create an animation in which the photos will move from left to right.

Line 1 @keyframes from-left-to-right {
Line 2 0% { opacity:0;transform:translate(0%,0px) scale(1) }
Line 3 25% { opacity:1;transform:translate(2%,0px) scale(1 ) }
Line 4 75% { opacity:1;transform:translate(8%,0px) scale(1) }
Line 5 100% { opacity:0;transform:translate(10%,0px) scale(1) }
Line 6 }

Line no 1 – declared the @keyframes, it will tell the browser inside this @keyframes properties will have animation and this animation name would be ”from-left-to-right”. I will use this name wherever I need this animation. As, you can see above, I have created 4 frames, but you can define as many as you need there. Below is an explanation of properties.
Line no -2 - 0% - This will be the start position of the frame, and from here, the animation will start. So, the style properties would opacity 0 (means invisible), left position 0 and top position is also 0. Scale 1 means default size of photo.
Line no -3 - 25% - When the keyframes moves from 0 to 25, it will be smoothly visible with moving effect till 25% of stage. Properties will change like left position 2% but no change of top position and its scale.
Line no -4 - 75% - It keeps moving smoothly till 75% and left position changes to 8% but no change of top position and scale.
Line no -5 - 100% - The animation ends here, keyframes moves from 75% to 100% photos smoothly go invisible, left position 10% but no change of top position and scale value.

The above sets keyframes are ready to animate, I just need to assign this in a class. Moving further, I will create a class name with same keyframes name, but it can be any class name “.from-left-to-right”.

Line 1 . from-left-to-right {
Line 2 animation-name: from-left-to-right;
Line 3 animation-duration: 30s;
Line 4 animation-iteration-count: infinite;
Line 5 }

Line no 1 – I have assigned “from-left-to-right” keyframes animation to a class called “.from-left-to-right” in that class I have passed few other specific parameters required for this animation.
Line no 2 – I tell which keyframe to pick.
Line no 3 – The duration of this animation
Line no 4 – This is the animation’s repetition

If you have more than 1 slide, you should define the delay properties; it shows after how many sec of delay, you would want to move this frame.

Line no 1 .delay-6s {
Line no 2 animation-delay:6s;
Line no 3 }

Line no 1 – defines delay class
Line no 2 – defines the time for delay in the beginning

Please copy below code and create a new HTML page. In the below example of code, I have used 4 frames and based on the frames, I have passed different values to @keyframes.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ken Burn Animation with CSS3 @keyframes</title>

<style>

@keyframes zoom-out-4-slide {

            0% { opacity:0;transform:scale(1) rotate(0.02deg); }

            10% { opacity:1;transform:scale(0.94) rotate(0.02deg); }

            25% { opacity:1;transform:scale(0.85) rotate(0.02deg); }

            35% { opacity:0;transform:scale(0.79) rotate(0.02deg); }

}

@keyframes from-left-4-slide {

            0% { opacity:0;transform:translate(0%,0px) scale(1) rotate(0.02deg); }

            10% { opacity:1;transform:translate(3%,0px) scale(1) rotate(0.02deg); }

            25% { opacity:1;transform:translate(7%,0px) scale(1) rotate(0.02deg); }

            35% { opacity:0;transform:translate(10%,0px) scale(1) rotate(0.02deg); }

}

@keyframes from-top-4-slide {

            0% { opacity:0;transform:translate(0,0%) scale(1) rotate(0.02deg); }

            10% { opacity:1;transform:translate(0,3%) scale(1) rotate(0.02deg); }

            25% { opacity:1;transform:translate(0,9%) scale(1) rotate(0.02deg); }

            35% { opacity:0;transform:translate(0,12%) scale(1) rotate(0.02deg); }

}

@keyframes from-bottom-4-slide {

            0% { opacity:0;transform:translate(0,0%) scale(1) rotate(0.02deg); }

            10% { opacity:1;transform:translate(0,-4%) scale(1) rotate(0.02deg); }

            25% { opacity:1;transform:translate(0,-9%) scale(1) rotate(0.02deg); }

            35% { opacity:0;transform:translate(0,-12%) scale(1) rotate(0.02deg); }

}

.zoom-out-4-slide {animation:zoom-out-4-slide 24s linear infinite;}

.from-left-4-slide {animation:from-left-4-slide 24s linear infinite;}

.from-top-4-slide {animation:from-top-4-slide 24s linear infinite;}

.from-bottom-4-slide {animation:from-bottom-4-slide 24s linear infinite;}

.kenburn-effect div {background-repeat:no-repeat;background-position: center center;}

.delay-6s {animation-delay:6s;}

.delay-12s {animation-delay:12s;}

.delay-18s {animation-delay:18s;}

/*/### set viewport for Banners ###*/

.stage {overflow:hidden;width:100%;height:500px;padding:0px;margin:auto;position:relative;max-width:1600px; position:relative;background-color: #ccc;}

.stage .slide {width: 2200px;height: 740px;position: absolute;margin-left:-230px;margin-top:-100px;opacity: 0;background-repeat:no-repeat;background-position: center center;background-size:cover;}
</style>
</head>
<body>
<div class="stage">       

    <div class="slide zoom-out-4-slide delay-0s" style="background-image: url('http://lorempixel.com/1920/900/nature/1/');"></div>

    <div class="slide from-left-4-slide delay-6s" style="background-image: url('http://lorempixel.com/1920/900/nature/2/');"></div>   

    <div class="slide from-top-4-slide delay-12s" style="background-image: url('http://lorempixel.com/1920/900/nature/3/');"></div>

    <div class="slide from-bottom-4-slide delay-18s" style="background-image: url('http://lorempixel.com/1920/900/nature/4/');"></div>           
</div>
</body>
</html>

Reference

https://en.wikipedia.org/wiki/Ken_Burns_effect

www.w3schools.com/css/css3_animations.asp