The Ken Burns Effect Using CSS Animations | kirupa.com

programming
#1

by kirupa | 18 September 2015

Ken Burns is a pretty famous (and award-winning) documentary film maker. While I haven't personally seen any of his documentaries, it's not cool to admit that publically. If you haven't seen any of his documentaries either, just pretend that you have. Your coolness quotient will certainly go up. Anyway, we aren't really here to talk about Ken Burns and how edumacationally amazing his documentaries are. Instead, we are here to talk about a camera effect he pioneered that I guarantee you've seen.

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/ken_burns_effect_css.htm
#2

How do I figure out which numbers to use for all of those various settings?

#3

Trial and error. It depends on the effect you are going for. With that said, I should mention that as a note :smile:

#4

I’m going for the Ken Burns effect. :trout:

1 Like
#5

Hi - I am curious how you would go about staging a transition to a second and third picture? How would you time a transition to occur right when you animation is complete?

#6

Hi Erik - so sorry for the massive delay in getting back to you on this. If you are still looking for a solution, are you trying to change the picture that is currently displayed with a different picture? Or is the picture already on the page and you just need to shift the focus to some part of it?

#7

I was just wanting to use this effect as more of a slide show with 5-10 images in sequence. Each image might zoom into a different area of the picture. How would you accomplish that?

#8

It will require a few things that I won’t have time tonight to elaborate on, unfortunately.

The first step is to figure out when the first animation ends, and you can do that by listening to events fired by the animation: https://www.kirupa.com/html5/css_animation_events.htm

The next step once the animation has ended is to load your new image and have a new CSS animation kick in with the new positions for where you will need to zoom in to.

Does this help a little in getting you pointed in the right direction? I will do my best to elaborate more tomorrow morning.