悬停时过渡线性动画答案

【问题标题】：Transition a linear animation on hover off悬停时过渡线性动画
【发布时间】：2019-04-09 02:49:23
【问题描述】：

我试图像唱片播放器上的黑胶唱片一样在悬停时无限旋转 SVG 徽标，然后在悬停时减慢/缓和动画，例如从播放器中取出针头。

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

    @-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;
}

【问题讨论】：

能否将其余代码包含在内，谢谢

标签： css css-transitions css-animations

【解决方案1】：

您可以使用 :not(:hover) pseudo-class 对来做到这一点，它会在 element 为 "unhovered" 后触发 animation >，以及一个 wrapper 元素，其 animation 在相反方向 (-) 会在页面加载时使 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>

【讨论】：