1

On Tailwind i use hover:pause to pause an animation. On the computer it works great. On the phone however the user clicks the animation to pause is (good), but has to click outside of the animation to start it again.
I want the animation to start again when the phone user realeses the touch on the animation.

This is this code from the tailwind.config.js file. and the div where I use the hover:pause.

I've tried to add

className="animate-infinite-slider hover:pause 

animation: {
        'infinite-slider': 'infiniteSlider 30s linear infinite',
      },
      keyframes: {
        infiniteSlider: {
          '0%': { transform: 'translateX(0px)' },
          '100%': { transform: 'translateX(calc(-17 * 264px))' }, // change the negative number to number of slides
        }
      },

I've also added the hoverOnlyWhenSupported attribute, but it doe's not seem to work :(.

    extend: {
      future: {
        hoverOnlyWhenSupported: true,
      },
Torkil
  • 21
  • 2
  • Browsers are not very consistent in how they handle hover. And there's no `:touch` pseudo-class in css. I'd think you'd probably have to write javascript and utilize `touchstart` and `touchend` [events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events) to do what you want. – Nick Aug 17 '23 at 18:00

0 Answers0