🐼
panda-transitions-css

Drop-in CSS transitions from transition.css for Panda CSS.

npm i -D panda-transitions-css

About

It's a preset for Panda CSS that adds Transition.css transitions to your project.

Install

npm i -D panda-transitions-css
#or
yarn add -D panda-transitions-css
#or
pnpm i -D panda-transitions-css

Usage

Add as first item of presets in your Panda config.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // Other config...
  presets: ['panda-transitions-css', '@pandacss/dev/presets'],
})

You can now use it in your project.

<div
  className={css({
    animationName: 'in:circle:hesitate',

    // Optional attributes
    animationRepeat: 'infinite', // can also be a number
    animationDuration: '1s',
    animationDelay: '1s',
  })}
>
  Element with Transition
</div>

You can play around with the animations in the docs

Sponsors ✨

Thanks goes to these wonderful people