css - 悬停时过渡线性动画

Question

我正在尝试在悬停时无限旋转 SVG Logo ，就像唱机上的黑胶唱片一样，然后在悬停时放慢/缓和动画，就像从播放器上取下一根针一样。

但是，我不知道如何在悬停关闭时实现平滑过渡。有任何想法吗？

    @-webkit-keyframes spin { 
  100% { -webkit-transform: rotate(360deg); } 
}
@-moz-keyframes spin { 
  100% { -moz-transform: rotate(360deg); } 
}
@keyframes spin { 
  100% {  
  transform:rotate(360deg); 
  } 
}

transition: all 1s ease;

&:hover {
 -webkit-animation:spin 1s linear infinite;
 -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
}

Answer 1

您可以使用 :not(:hover) 伪类 对来实现，它会在 之后触发 animation元素是“unhovered”，连同包装元素，其动画在相反的方向(-) 在页面加载时使 child 之一无效。

为了避免任何视觉偏差和不一致，使用并推荐使用 linear 的animation-timing-function:

.vinyl {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: repeating-radial-gradient(#fff, #fff 1px, #000 1px, #000 2px);
}

.vinyl:hover {
  animation: spin 1s linear infinite;
}

@keyframes spin { 
  100% {transform: rotate(360deg)}
}

.vinyl:not(:hover) {
  animation: stop 2s ease-out;
}

@keyframes stop {
  100% {transform: rotate(360deg)}
}

span {
  display: inline-block; /* required */
  animation: nullify 2s ease-out;
  background: #ddd; /* just for demo */
}

@keyframes nullify {
  100% {transform: rotate(-360deg)}
}

<span>
  <div class="vinyl"></div>
</span>