Question, help about transition

[DasdWaller]

How to convert this css transition code into tailwind?

#arrow {
  position: relative;
  top: 0;
  transition: top ease 0.5s;
}
#arrow:hover {
  top: -10px;
}

<div id="arrow">
  <i class="fa fa-arrow-down"></i>
</div>

[simonswiss]

Hello!

Not exactly the same values, but you should get the idea of what's happening here and can add your own values (10px) in the config file..

Instead of animating the top property on hover, I opted to use the translateY transform property instead, which is better for performance reasons.

<div class="transform hover:-translate-y-3 transition duration-500">
  <!-- SVG for arrow-down icon -->
  <svg class="h-5 w-5" ... />
  </svg>
</div>

This will animate the icon upwards by 0.75rem or 12px, over a duration of 500 milliseconds, on hover 👍

Here's a little Tailwind Play example for you:

https://play.tailwindcss.com/Z3klJ3Av9l

Hope it helps!