css - 悬停时平滑的 CSS 旋转动画

Question

我创建了一个按钮，我希望它在鼠标悬停时旋转 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;
}

<a href="#" class="btn btn-rotate">I am a button!</a>

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

Answer 1

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

对比上面那个，感觉用wrapper(div)，分析了我们可能需要多大的宽度，就设置为div。在 div:hover 元素上，我们可以执行过渡。与现在相比，它提供了更好的结果。

这是 fiddle

.buttonHolder {
    padding: 50px;  
}

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