@flassgravel Hey there! You can directly use it like animate-animated hover:animate-bounceIn if you are using JIT mode. Without JIT mode, you first need to enable the variants. Please refer the official docs.
Note that, using hover may result in flickering. This is not a bug, but is how CSS :hover pseudo-class works. In this particular case the moment you will hover, the element will be transformed to scale3d(0.3, 0.3, 0.3). So, if your hover position was not near the center your mouse will be out of the element. Hence, the animation will be cut off. But now since the element is back to its original size, it will begin again, and will flicker continuously until the pointer is over pivot or completely outside the element. To prevent this, use the resolution mentioned in this answer.
@flassgravel Hey there! You can directly use it like
animate-animated hover:animate-bounceInif you are using JIT mode. Without JIT mode, you first need to enable the variants. Please refer the official docs.Note that, using
hovermay result in flickering. This is not a bug, but is how CSS:hoverpseudo-class works. In this particular case the moment you will hover, the element will be transformed toscale3d(0.3, 0.3, 0.3). So, if your hover position was not near the center your mouse will be out of the element. Hence, the animation will be cut off. But now since the element is back to its original size, it will begin again, and will flicker continuously until the pointer is over pivot or completely outside the element. To prevent this, use the resolution mentioned in this answer.With React frameworks, you can easily do something like this: codesandbox.io/s/fervent-babbage-y...
Thank you very much for your reply! I haven't got jit mode to work yet so i'll have to wait until then. Thanks anyways!