css - 悬停时的 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;
    }
}

我想要它做的是将悬停比例从动画中的任何位置调整到正确的大小。

即，如果它当前是缩小尺寸的比例（1.2），则在悬停时返回到比例（1.33）。

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

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

这是一个jsfiddle示例。

标签： csscss-animationsscalepausepulse

Answer 1

只需scale(1)从100%. 你也不需要暂停动画

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>