Question

我正在尝试像在唱机上的乙烯基上那样无限地在悬停时旋转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;
}

Answer 1

您可以使用:not(:hover) 伪类对来实现，该对在被悬停后会触发animation “ ，以及一个包装器元素，该包装器元素的animation沿相反的方向（-）使页面上的 child 之一无效加载。

为避免任何视觉偏差和不一致，建议使用linear的动画计时功能：

.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>

悬停时过渡线性动画

1 个答案: