Ken Burns Effect in CSS3
Published in
1 min readOct 3, 2015
Ken Burns effect is nothing, but panning and zooming effect used in video production from still imagery. In recent times it has gained more popularity. Today I will be showcasing how I created one by using CSS3 properties. The name derives from extensive use of the technique by American Ken Burns.
Ken Burns effect is been used in Android apps like Play NewsStand, for still images on websites and video production. It just brings the still images to live. I have created a custom CSS class “ken-burns” with a custom key frame for panning and zooming smoothing, which can used for any image.
View Full Source Code and Demo on Codepen
