Playing an animation only once

[al-hadi]

I can't seem to play an animation only once.

I'm using something like this in tailwind.config.js

animation: {
    'vote': 'vote 1s ease-in-out once',
},
keyframes: {
    vote: {
        '0%, 100%': {
            transform: 'rotate(-30deg)'
        },
        '50%': {
            transform: 'rotate(30deg)'
        },
    }
}

I couldn't find examples on how to achieve this after looking at https://tailwindcss.com/docs/animation

I know that tailwindcss-animations had something like animationIterationCount but I'm not experimented enough to figure it out.

Any help is appreciated

Thank you

[alexanderbluhm]

@al-hadi Simply remove the once then it works :)
('vote': 'vote 1s ease-in-out')

[simonswiss]

I made a little Tailwind Play example for you: https://play.tailwindcss.com/jpoykJoSAQ

Since the animation only happens once, I made it start and finish at 0deg rotation, so it doesn't abruptly jump back in position after the animation.

You probably want to throw a nice cubic bezier curve on that easing too 👍