tailwindcss-ken-burns
v1.0.0
Published
A Tailwind CSS plugin for Ken Burns zoom and pan effects
Maintainers
Readme
tailwindcss-ken-burns
A Tailwind CSS plugin that adds Ken Burns zoom and pan animation effects to your images.
Installation
npm install tailwindcss-ken-burns
Usage
Add the plugin to your tailwind.config.js:
module.exports = {
plugins: [
require('tailwindcss-ken-burns')
]
}
Apply to your images:
<div class="overflow-hidden rounded-lg w-full h-96"> <img src="/image.jpg" alt="Ken Burns effect" class="w-full h-full object-cover animate-ken-burns" /> </div>
Available Classes
animate-ken-burns - 20s duration (default)
animate-ken-burns-slow - 30s duration
animate-ken-burns-fast - 10s duration
animate-ken-burns-once - Plays once without looping