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

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

您可以依赖

animation-composition: add

并拥有两个不同的关键帧（就像我在这里解释的那样：https://css-tip.com/accelerate-rotation/）

.box {
  --_a: rotate 5s linear infinite;
  animation: var(--_a),var(--_a) paused;
  animation-composition: add;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  to {rotate: 1turn}
}

.box {
  --_a: rotate 5s linear infinite;
  animation: var(--_a),var(--_a) paused;
  animation-composition: add;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  to {rotate: 1turn}
}




.box {
  width: 150px;
  aspect-ratio: 1;
  background: conic-gradient(in hsl longer hue,red 0 0);
  background-color: red;
  border-radius: 30px;
  cursor: pointer; 
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #333;
}

<div class="box"></div>

---

旧答案

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

这是一个例子：

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