如何在悬停后将鼠标移出动画

Question

这正是我想要实现的目标（当我悬停时动画开始并且在我悬停之后启动）。我只是不希望动画开始，直到我将鼠标悬停在对象上。在代码中，动画在刷新后立即启动。

＆＃13;

＆＃13;

<div style="width:100px; height:100px; background-color:red" class="class"></div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以摆脱动画，只需在类上直接添加transform和transition属性，如下所示：

＆＃13;

＆＃13;

.class {
  transform: rotate(0deg);
  transition: transform 2s;
}

.class:hover {
  transform: rotate(360deg);
  transition: transform 5s;
}

＆＃13;

<div style="width:100px; height:100px; background-color:red" class="class"></div>

＆＃13;

＆＃13;

＆＃13;