CSS 悬停时脉冲动画覆盖

Question

我有一个脉动圆圈，需要能够在悬停时停止脉动，然后缩放到正确的大小。

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        animation-timing-function: ease-in;
    }

    50% {
        transform: scale(1.33);
    }
}

.circle{
    border-radius: 50%;
    border: 5px solid #f0f;
    height: 30px;
    width: 30px;
    
    animation: pulse 2s infinite;
    &:hover{
        transform: scale(1.33);
        animation-play-state: paused;
    }
}

我希望它做的是将鼠标悬停缩放到动画中的正确大小。

即如果它当前在缩小尺寸时为 scale(1.2)，请在悬停时返回到 scale(1.33)。

-- 注意：这应该过渡，而不只是捕捉到那个大小。

css 这可能吗？我需要做一些其他的魔法吗？

这里有一个jsfiddle的例子。

Answer 1

动画属性将始终覆盖普通属性。您可以使用 CSS 变量来覆盖动画属性.

var(--expected-variable-if-exist, default)

html,
body {
  padding: 20px;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(var(--scale, 1));
    animation-timing-function: ease-in;
  }
  50% {
    transform: scale(var(--scale, 1.33));
  }
}

.circle {
  border-radius: 50%;
  border: 5px solid #f0f;
  height: 30px;
  width: 30px;
  animation: pulse 2s infinite;
}

.circle:hover {
  --scale: 1.33;
  animation-play-state: paused;
}

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

Answer 2

只需从 100% 中删除 scale(1)。你也不需要暂停动画

html,
body {
  padding: 20px;
}

@keyframes pulse {
  0%,
  100% {
    animation-timing-function: ease-in;
  }
  50% {
    transform: scale(1.33);
  }
}

.circle {
  border-radius: 50%;
  border: 5px solid #f0f;
  height: 30px;
  width: 30px;
  animation: pulse 2s infinite;
}

.circle:hover {
  transform: scale(1.33);
  /* animation-play-state: paused; */
}

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

一个过渡的想法：

html,
body {
  padding: 20px;
}

@keyframes pulse {
  0%,
  100% {
    animation-timing-function: ease-in;
  }
  50% {
    transform: scale(1.33);
  }
}

.circle {
  width: 40px;
}
.circle::before {
  content:"";
  display:block;
  border-radius: 50%;
  border: 5px solid #f0f;
  height: 40px;
  box-sizing:border-box;
  animation: pulse 2s infinite;
}

.circle:hover {
  transform: scale(1.33);
  transition:1s;
}
.circle:hover::before {
  animation: none;
}

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

CSS 悬停时脉冲动画覆盖

CSS pulse animation override on hover

css

css-animations

scale

pause

pulse