如何在悬停时播放动画？

Question

当鼠标悬停在按钮上时，我想要旋转一个按钮。然而，当鼠标进入时旋转工作，当鼠标离开时旋转也会旋转。这就是我的意思：

＆＃13;

＆＃13;

button {
  transition: transform 1.2s linear;
}

button:hover {
  transform: rotate(360deg);
}

＆＃13;

<button>X</button>

＆＃13;

＆＃13;

＆＃13;

当鼠标进入时，有没有办法让鼠标旋转？

Answer 1

试试这个代码段

button:hover {
  transition: transform 1.2s linear;
  transform: rotate(360deg);
}

<button>
X
</button>

Answer 2

试试这个

＆＃13;

＆＃13;

button:hover {
  transform: rotate(360deg);
  transition: transform 1.2s linear;
}

＆＃13;

<button>
X
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在先前的示例中，当鼠标离开元素时，过渡会非常突然地重置为第一状态。最好让过渡播放。

在此示例中，当鼠标悬停或鼠标左键移动时，该按钮会变为动画：

button {
   transition: transform 1.2s linear;
}
button:hover {
   transform: rotate(360deg);
}

<button>
X
</button>