CSS pulse animation override on hover

Question

I have a pulsing circle that needs to be able to stop pulsing on hover, but then scale to the correct size.

@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;
    }
}

what i would like it to do is on hover scale to the correct size from where ever it is in the animation.

i.e. if it is currently scale(1.2) on the downsize, go back up to scale(1.33) on hover.

-- note: this should transition, not just snap to that size.

is this possible with css? do i need to work out some other wizardry?

here is a jsfiddle for an example.

Answer 1

Simply remove the scale(1) from 100%. You also don't need to pause the animation

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>

An idea in order to have a transition:

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>