animation-play-state: paused

[imannms]

I just noticed that there's no animation-play-state: paused in vanilla tailwind.

It will be nice if we can use hover:animate-paused or something like that.

[mvanaltvorst]

Facing the same issue here, would be a nice feature to have.

[myomyintaung1411]

any solution ?

[myomyintaung1411]

any solution brother?

[Christopotamus]

I know I'm super late with this, but you can extend tailwind by adding a utility class. These automatically get the variants: https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer.

This needs to be added in the CSS file you're declaring tailwind in:

I've included the Tailwind declaration just so it's clear which file you'll need to put this in. Also this is for Tailwind 3.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
   .pause {
     animation-play-state: paused;
   }
}

Now you can simply use the class:

hover:pause

[joseavr]

can you explain what the bracket in [...] does in tailwind?

[Christopotamus]

These are arbitrary Properties and allow you to use any CSS as what is essentially an inline style.

https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties

If you ever need to use a CSS property that Tailwind doesn’t include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS

[amaan-aly246]

could also go with:

<div class="[animation-play-state:paused] hover:[animation-play-state:paused] ...

why writing animation-play-state:paused twice , when I want to apply this property on hover?

[mv-stns]

Just to clarify, arbitrary properties are present and are coded in that manner. When you specifically require an effect only upon hovering, you should utilize the hover selector.

[debleena-c]

could also go with:

<div class="[animation-play-state:paused] hover:[animation-play-state:paused] ...

Thanks man. This worked so nice

[ilyvion]

For anyone coming here for a solution that works on Tailwind v4, here's what I ended up with:

@utility pause-animation {
  animation-play-state: paused;
}

which lets you use it like it's a native utility, e.g.:

<div class="hover:pause-animation"></div>

[imaksp]

It would be great addition , utility is also missing for animation-iteration-count.

@utility animate-infinite {
    animation-iteration-count: infinite;
}

@utility animate-once {
    animation-iteration-count: 1;
}

@utility animate-twice {
    animation-iteration-count: 2;
}

@utility animate-thrice {
    animation-iteration-count: 3;
}

@utility animate-iteration-* {
    animation-iteration-count: --value(integer, [integer]);
}

/* play state */
@utility animate-run {
    animation-play-state: running;
}

@utility animate-play {
    animation-play-state: running;
}

@utility animate-pause {
    animation-play-state: paused;
}

[JamesDennisOrg]

Just as an update for anyone still checking for this - Tailwind V4 now includes the classnames "paused" & "running".

Simply add the classname as with other Tailwind classnames as follows:
className="animate-bounce paused group-hover:running"

[RobinMalfait]

Tailwind CSS v4 itself does not have these classes. If they work, you probably use a plugin that defines them.

[JamesDennisOrg]

Whilst there is no documentation on Tailwind that discusses "paused" or "running" - Yes, technically this is correct... you need the @import "tw-animate-css" directive in your imports...! And need to install: npm install tailwindcss-animate

I've been so used to using Shadcn, which auto installs this TW plugin.

So... for those reading...if you do want to use the classnames: "running" or "paused" -

npm install tailwindcss-animate
then : @import "tw-animate-css"

Then: simply use "running", or "paused" in your animated element classnames.