10+ Mind-Blowing Ken Burns Effects in CSS & JS (CodePen)

Level up your web design check out the best collection of 10+ Ken Burns effects from CodePen! No Javascript required – explore pure CSS solutions for developers who value code. Find inspiration for beautiful animations, unique slideshows, and hidden gems that’ll add a touch of magic to your web projects.

1. Ken Burns effect CSS only by Dima

Author: Dima
Links: Source Code / Demo
Made with: HTML CSS js


2. Ken Burns effect with Vegas 2 by Jay Salvat

Author: Jay Salvat
Links: Source Code / Demo
Made with: HTML CSS js


3. Ken Burns Effect by Dima

Author: Dima
Links: Source Code / Demo
Made with: HTML CSS js


4. Random Ken Burns Image Animation Effect by Dudley Storey

Author: Dudley Storey
Links: Source Code / Demo
Made with: HTML CSS js


5. CSS-only directionally aware hover by Giana

Author: Giana
Links: Source Code / Demo
Made with: HTML CSS js


6. Ken Burns Image Gallery Cards with Animated Captions by Stephanie Eckles

Author: Stephanie Eckles
Links: Source Code / Demo
Made with: HTML CSS js


7. Looking through Dirty Glass by Chris Smith

Author: Chris Smith
Links: Source Code / Demo
Made with: HTML CSS js


8. Ken Burns Effect by Jordan Little

Author: Jordan Little
Links: Source Code / Demo
Made with: HTML CSS js


9. Ken Burns Effect using CSS3 & JS by Mack Richardson

Author: Mack Richardson
Links: Source Code / Demo
Made with: HTML CSS js


10. Ken Burns Effect by PierreEric Marchandet

Author: PierreEric Marchandet
Links: Source Code / Demo
Made with: HTML CSS js


11. Ken Burns Effect by Gavin Simpson

Author: Gavin Simpson
Links: Source Code / Demo
Made with: HTML CSS js