0

Hello I am looking for a CSS only solution for animations pause on hover halfway until hovered off. I have one example working but it is on page load.

<h2>I want to pause this one on hover mid-way</h2>

<button type="button" class="psuedo-animation btn-primary">Pause on Hover
</button>

<h2>Example 2 - This is everything I want EXCEPT animation loads on page load though</h2>

<button type="button" class="psuedo-animation-2 btn-primary">Paused on Hover
</button>

https://codepen.io/fawn-marie/pen/NWYBjEo

Fawn
  • 73
  • 1
  • 4
  • 20
  • 1
    Seems easier to just use the second example and prevent it from running on page load? Here are some ways to do that: https://stackoverflow.com/questions/27938900/how-to-prevent-a-css-keyframe-animation-from-running-on-page-load – Bman70 Aug 10 '22 at 02:23
  • @Bman70 I've implemented it very similar to the example above. Any idea what I might be missing because on load it still shows the animation. I wonder if :after just auto loads no matter what. https://codepen.io/fawn-marie/pen/NWYBjEo – Fawn Aug 10 '22 at 05:35
  • You are required to post a [mcve] here, **within your question**, and [not a link](https://meta.stackoverflow.com/a/254430/162698) to any other site. – Rob Aug 10 '22 at 11:15
  • I don't know what you did, but both buttons now do the same behavior. The first button is doing what you want, it pauses halfway with hover, and doesn't run on page load. – Bman70 Aug 11 '22 at 00:16

0 Answers0