bentzibentz/tailwindcss-animate.css

Animate CSS plugin for Tailwind CSS

tailwindcss-animate.css's Issues

Missing closing bracket

tailwindcss-animate.css/animate/keyframes/fadeOut.js

Line 125 in 87afb46

transform: 'translate3d(-100%, 100%, 0'

important breaks the animations

Setting the important: true, for utility classes breaks the animate.css plugin, each animation gets !important at the end of the definition which isn't supported and animations aren't working.
example:

// tailwind.config.js initial part
module.exports = {
  prefix: '',
  important: true,
  // ...
}

compiled css:

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0) !important;
    visibility: visible !important;
  }

  to {
    transform: translate3d(0, 0, 0) !important;
  }
}

How to customize transition speed?

Minify CSS

Hello, I am trying minify CSS with purgecss, but something wrong.
Css file still get up to >2000 lines :c
In that file have there animate:
@-webkit-keyframes fadeOutUp {
to {
opacity: 0;
transform: translate3d(0,-100%,0)
}
}
It only come from this... I don't know how to fix.

Custom prefix instead of animate__

addUtilities(
            [
                Object.entries(utilities).map(([key, value]) => {
                    return {
// "animate__" can be a custom variable here instead with "animate__" being a default value if custom is undefined.
                        [`.${e(`animate__${key}`)}`]: value, 
                    }
                })
            ]
        )

What do you think of this idea? Tailwind usually uses '-' as delimiter and I would really like to have things being consistent to one style.
Also, can you please tell me if there was something preventing you from just using "animated", "fadeIn" etc. styles without prefix? Because I would like to have "" prefix as a valid one too.

Dynamically changing speed

Can't seem to dynamically change the speed timing, note you can globally in settings with animatedSpeed: 1000, but being able to document.documentElement.style.setProperty('--animate-duration', '20ms'); won't work as the variable isn't being used on animate__animated.

Not found class name with @tailwindcssinjs/macro

Hi, im using @tailwindcssinjs/macro with tailwindcss-animate.css
I have this code
tw`shadow-md rounded nm-flat-gray-200-lg animate__animated animate__fadeInLeft
It's work well without animate class name. I use other plugin is tailwindcss-neumorphism, it work ok with no error.
Can you do something to make them work together, Thank you :D

Get `variants` from Tailwind's config instead of plugin options

Pretty straightforward too. Can open PR if you want.

Add plugin option to support `prefers-reduced-motion`

CSS allows you to detect if users have decided to opt-out of motion-related stuff. Would be cool if there was an option to wrap the generated CSS into a mediaquery checking for this.

This is important for accessibility reasons.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Tailwind 1.0 Support

I tried using the plugin with Tailwind v1.0 and it doesn't seem to be working.

Here is my tailwind.config.js

plugins: [
    require('tailwindcss-animatecss'),
]

When I tried it with your docs example, it was erroring out.

Thoughts?

Upgrade to animate v4

Upgrade to use the new animate.css v4 library
http://animate.style/

`release-it` should be a dev dependency

release-it and @release-it/conventional-changelog should be moved to dev dependencies or removed entirely before pushing to NPM because it creates a lot of unnecessary bloat.

A confusing section in README

You want to determine yourself which classes are used? You just have to set these class names at the classes array. Caution, class names without dot and without the animate prefix, for example if you want .animate__fadeIn just add animate__fadeIn to the array. You can find all available class names further down.

v3 compatibility

Hey there, is it possible to upgrade the package to be compatible with Tailwind v3?

Demo missing

Assign this issue to me and I will create demo page.

Allow option to include all classes and let purgecss do the cleaning

Right now, you need to specify the classes that you will be using in the config

Why this plugin?

Can I ask you why this plugin?

What if I simply add animate.css to my project?

Example:

index.css:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "animate.css/animate";

index.html:

<div class="animate__animated animate__bounce">The div</div>

What is the use of your plugin?

fadeInRight and fadeInLeft don't work

hey, I am trying to use fadeInRight and fadeInLeft animation for my project. But it doesn't work at this point. Here is thetailwindcss.config.js

const defaultTheme = require('tailwindcss/defaultTheme')


module.exports = {
    theme: {
        extend: {
            colors: {
                'blue': '#246CE9',
                'light': '#E8EDFB',
            },
            fontFamily: {
                sans: ['Poppins', ...defaultTheme.fontFamily.sans]
            },
            keyframes: {
                fadein: {
                    '0%': { opacity: 0 },
                    '50%': { opacity: 0.5 },
                    '100%': { opacity: 1 }
                },
            },
            animation: {
                fadein: 'fadein 3s ease-in',
            }
        }
    },
    purge: ['./src/**/*.{js,jsx,ts,tsx}'],
    plugins: [
        require('@tailwindcss/typography'),
        require('tailwindcss-animatecss')({
            classes: ['animate__animated', 'animate__fadeIn', 'animate__fadeInRight', 'animate__fadeInLeft'],
            settings: {
                animatedSpeed: 1000,
                heartBeatSpeed: 1000,
                hingeSpeed: 2000,
                fadeInSpeed: 750,
                fadeOutSpeed: 750,
                animationDelaySpeed: 1000
            },
            variants: ['responsive', 'hover', 'reduced-motion'],
        }),
    ]
}

Then I add animate__fadeInRight to className of my component. But the image doesn't fade in.

Allow users to cherry pick animations in plugin config

So instead of always generating classes for everything in animate.css, I'd like to be able to pass an array of animations (or animation groups aka the labels used for optgroup's on Animate.css' website).

This would reduce the CSS bloat when not using PurgeCSS (can't use it on this site I'm working on for reasons) and help avoid possible name collissions in case the codebase already includes a given classname.

Is there an easy/recommended way of customizing the final opacity.

Like overwriting this somehow?

tailwindcss-animate.css/animate/keyframes/fadeIn.js

Line 16 in b9c5f61

opacity: '1',

require(...) is not a function when installing

My tailwind.config.js:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {}
  },

  plugins: [
    // Other plugins
    require('tailwindcss-animatecss')()
  ]
}

Just followed instructions on readme and got this error upon running:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css
TypeError: require(...) is not a function

Add `prefix` option to plugin config to namespace generated classes

This would help avoid possible name collisions in case the codebase already includes a given classname.

Add delay and prefers-motion-reduced from _base.css

Is it possible to add these features to this project?

animate.css/source/_base.css

Prevent plugin from breaking when no object is passed

This would be a matter of providing an empty object as fallback.

Can open a PR with the changes if you want.