Question

我的徽标在[我的网站] [1]上旋转。当我用鼠标悬停它时，我希望它旋转得更快。在我将徽标悬停时，它会简单地返回到其原始旋转，然后更快地开始新的旋转。我希望徽标在悬停时能够提高和降低速度而不会返回到原始旋转。

这是我的徽标：

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

Answer 2

您无法通过更改时间来更改速度。一个想法是沿相同方向旋转容器，整体速度将会提高。

这里是一个例子：

.logo {
  width: 100px;
  height: 100px;
  background: red;
  animation: spin 5s linear infinite;
}

.container {
  margin:10px;
  display: inline-block;
  transition:10s all;
}

.container:hover {
  transform: rotate(-3000deg);
}

@keyframes spin {
  100% {
    transform: rotate(-360deg);
  }
}

<div class="container">
  <div class="logo"></div>
</div>

将鼠标悬停在CSS上时如何提高旋转动画的速度？

2 个答案: