Trying to make an image scroll from top to bottom on hover

[chantaseng]

Hello everyone,

I made a custom animation where when i hover on an image, it would scroll to the bottom, but my problem is: why does it keep going back to its initial starting point once it reaches the bottom of the image?

This is my custom animation:

/** @type {import('tailwindcss').Config} /
export default {
content: ['./index.html', './src/**/.{js,ts,jsx,tsx}'],
theme: {
extend: {
keyframes: {
scroll: {
'0%': { transform: 'translateY(0%)' },
'100%': { transform: 'translateY(-58%)' },
},
},
animation: {
scroll: 'scroll 5s linear',
},
},
},
plugins: [],
};

Thank you very much for helping me guys!

[wongjn]

The default value for animation-fill-mode is none:

The animation will not apply any styles to the target when it's not executing. The element will instead be displayed using any other CSS rules applied to it. This is the default value.

Thus, after the end of the animation, the element is as it was if the animation was not applied to it.

If you'd like it to keep the end state, then you'd be after forwards:

The target will retain the computed values set by the last keyframe encountered during execution.

   },
   animation: {
-     scroll: 'scroll 5s linear',
+     scroll: 'scroll 5s linear forwards',
   },
 },

[chantaseng]

Thank you very much Justin for the help. It worked! One more thing if you dont mind me asking, I want the image to transition back to its original state(from bottom to top) when i am no longer hovering the image.

In CSS, I would just do:

transition: all 2s ease-in-out;

but in Tailwind, it is a little bit different. ease-in-out doesnt seem to work so do i have to create another keyframe and animation for that? Thank you

[wongjn]

I'd use the transition-* set of classes, not the animation- classes for this case.

[chantaseng]

Thanks Justin! I am so happy it worked!!