html - 使用 CSS 悬停时如何提高旋转动画的速度？

Question

我的 Logo 在[我的网站][1]上旋转。当我用鼠标悬停它时，我希望它旋转得更快、更顺畅。当我悬停 Logo 时，它只是返回到原来的旋转，然后更快地开始新的旋转。我希望 Logo 在悬停时增加和减少速度而不返回到原始旋转。

这是我的标志:

<img id="logo" src="shilogo.svg" width="50" height="50" alt="Logo">

这是当前的 CSS:

#logo{
    padding:5px;
    -webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
    -moz-animation:spin 5s linear infinite;
}

#logo:hover{
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
}

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

Answer 1

您应该只重置动画持续时间以提高速度，否则整个规则都会重置:(注意:结果可能因浏览器而异，...)

#logo{
    padding:5px;
    animation: spin 5s linear infinite;
}

#logo:hover{
    animation-duration:1s;
}


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

<img id="logo" src="http://dummyimage.com/100"  alt="Logo">