如何在悬停不活动时播放悬停和暂停动画

沃梦达教程前端问题

2022-01-01

How to play an animation on hover and pause when hover is not active(如何在悬停不活动时播放悬停和暂停动画)

本文介绍了如何在悬停不活动时播放悬停和暂停动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个按钮，当鼠标悬停在它上面时，我想要旋转它。但是，当鼠标进入时旋转工作，当鼠标离开时旋转。我的意思是：

button {
  transition: transform 1.2s linear;
}

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

<button>X</button>

有没有办法在鼠标进入时只让鼠标旋转？

推荐答案

使用animation代替transition并使用animation-play-state^MDN

button{
  animation: rotate360 1.2s linear infinite;  /* animation set */
  animation-play-state: paused;               /* but paused */
}
button:hover{
  animation-play-state: running;              /* trigger on hover */
}
@keyframes rotate360 {
  to { transform: rotate(360deg); }           
}

<button>X</button>

这篇关于如何在悬停不活动时播放悬停和暂停动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：如何在悬停不活动时播放悬停和暂停动画

上一篇：仅CSS 3D旋转文本

下一篇：在动画-填充-模式：前进之后，悬停时的CSS变换和过渡不起作用