悬停时平滑的 CSS 旋转动画答案

【问题标题】：Smooth CSS rotate animation on hover悬停时平滑的 CSS 旋转动画
【发布时间】：2015-12-26 20:27:58
【问题描述】：

我创建了一个按钮，我希望它在鼠标悬停时旋转 360 度，并在悬停时旋转 360 度。到目前为止它运行良好，但如果你用鼠标慢慢地靠近它，它会闪烁。

这是代码的简短版本：

.btn {
	display: block;
	margin: 60px auto;
	width: 250px;
	padding: 15px;	
	position: relative;	

	color: #3498db;
	font-weight: 300;
	font-size: 24px;
	text-decoration: none;
			
	border: 5px solid #3498db;
					
	transform: rotate(360deg);
	transition: all 0.5s;
	transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);
}

.btn-rotate:hover {
	transform: rotate(0deg);
	transition-delay: 0;
	transition: all 0.5s;
}

&lt;a href="#" class="btn btn-rotate"&gt;I am a button!&lt;/a&gt;

完整代码请查看 codpen 演示 http://codepen.io/andornagy/pen/ojBNZx

【问题讨论】：

那是因为当你旋转它时，你不再悬停了，
如果您希望按钮在悬停后执行完整动画，您需要使用 jQuery（或纯 Javascript） - 如果可以选择 - 告诉我们...

标签： css css-selectors hover

【解决方案1】：

闪烁问题正在发生，因为当您将鼠标悬停在元素上时，元素开始旋转。旋转 x 度后，元素会旋转到一定程度，并且鼠标/光标不再在元素上。这就是闪烁发生的原因。

与上面的相比，我觉得使用包装器（div）并分析了我们可能需要多少宽度，我们将其设置为 div。在 div:hover 元素上，我们可以执行过渡。与现在相比，它提供了更好的结果。

这里是fiddle

.buttonHolder {
    padding: 50px;  
}

.buttonHolder:hover .btn-rotate {
    transform: rotate(360deg);
    transition-delay: 0;
    transition: all 0.6s;
}

【讨论】：

【解决方案2】：

这是一个想法，它仅在您悬停时添加额外的伪元素：

Demo

.btn:after {
  content: '';
  width: 300px;
  height: 150px;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn:hover:after {
  display: block;
}

给它一些背景颜色，这样可以更好地看到正在发生的事情......

为了获得最大程度的控制，我会求助于一些 JavaScript。

【讨论】：