CSS Only Ken Burns Effect

Image: CSS Only Ken Burns Effect GIF

The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery, popularised by American documentarian Ken Burns. We have seen this effect in web design for a while now and with this snippet, by Hugo Börjesson we see this effect created with pure CSS.

If you are having trouble with the pen, try the archived copy on GitHub

Ken Burns Pure CSS Snippet

See the Pen Ken Burns effect – pure css by Saijo George (@SaijoGeorge) on CodePen.0

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.