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;
}