animate-pulse scales object instead of desired "pulsing" colors

[1Ghasthunter1]

I've been trying to get animate-pulse to work on a fairly simple skeleton for quite some time:

      {[...Array(rowCount)].map((e, i) => (
        <div
          key={i}
          role="status"
          className=" p-4 space-y-4 rounded-2xl border border-gray-200 divide-y divide-gray-200 dark:divide-gray-700 md:p-6 dark:border-gray-700 animate-pulse"
        >
          <div className="flex justify-between items-center rounded-3xl w-full">
            <div>
              <div className="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" />
              <div className="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
            </div>
            <div className="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" />
          </div>
        </div>
      ))}
    </div>

For some reason, instead of just changing the colors over the skeleton, each of the individual divs will scale up, maybe 1.2x to 1.3x their original size and back down.

I've also tried directly copy-pasting examples with animate-pulse to have the same result.

I saw a similar post in unocss here: unocss/unocss#241

It seems they're related but all of the changes merged there do not work on my local branch.

Any idea what's going on?

Versions:

"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",

[wongjn]

Seems to work in isolation in Tailwind Play – could there be something else that is causing your issue?

[1Ghasthunter1]

Ok, so I've done some testing:

Environment	animate-pulse functionality
Vite	Works
create-react-app	Works
create-react-app converted to Vite	Fails (scales object)

Would you know of any reasons why converting would cause this to happen?

[wongjn]

Could there be some CSS somewhere that is redeclaring the pulse @keyframe somewhere?

[1Ghasthunter1]

Could there be some CSS somewhere that is redeclaring the pulse @keyframe somewhere?

There in fact was! Problem was:
import "animate.css/animate.min.css"; used in a few spots throughout my project.

For the record, could you explain why this causes an issue with Tailwind?

[wongjn]

The Animate.css pulse @keyframe is transform scaling which was what you were seeing. Animate.css was overriding Tailwind's pulse @keyframe`.

[1Ghasthunter1]

The Animate.css pulse @keyframe is transform scaling which was what you were seeing. Animate.css was overriding Tailwind's pulse @keyframe`.

Thank you to @wongjn for the answer.

To sum up, by importing import "animate.css/animate.min.css"; in my project, animate.css overrode tailwind's pulse keyframe, which caused this issue.

Solution is to not import a second instance of animate.css

[PhilETaylor]

I just wanted to say that this page helped me today when I googled this exact issue - the root cause of my problem was a keyframe from https://github.com/l-lin/font-awesome-animation which defined the pulse keyframe.

Time lost on this was a minimum thanks to your post here, so thanks.

[orufy-vijay]

thanks for this explanation @wongjn
i was using <style jsx> with @Keyframes pulse