Tailwind CSS 创建动画箭头

【问题标题】：Tailwind CSS create animated arrowTailwind CSS 创建动画箭头
【发布时间】：2022-02-02 16:30:55
【问题描述】：

我正在尝试创建一个移动的箭头（向上穿过直角，然后从左下角重新出现）。到目前为止，我已经完成了消失的部分，但无法解决如何让它从左下方返回。

我的代码如下：

<div class="text-3xl w-fit" style="clip-path: inset(0 0 0 0 );" >
   <div class="transition ease-in-out hover:-translate-y-5 hover:translate-x-5 " >↗</div>
</div>

（也有更好的方法）

【问题讨论】：

标签： css css-animations tailwind-css

【解决方案1】：

试试这个：

DEMO

<script src="https://cdn.tailwindcss.com"></script>

<div class="text-3xl p-2 group border w-fit grid" style="clip-path: inset(0 0 0 0 );">
  <div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out group-hover:delay-300 translate-y-10 -translate-x-10 group-hover:translate-y-0 group-hover:translate-x-0">↗</div>
  <div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out delay-300 group-hover:delay-[0s] duration-300 group-hover:-translate-y-10 group-hover:translate-x-10">↗</div>
</div>

【讨论】：

传奇。请问网格区域的用途是什么？
在不使用position: absolute的情况下重叠箭头。