cssanimationcss-animations

How do I stop my CSS animation from jumping on refresh?


I'm working on some hover animations for buttons in CSS. I want the buttons to have a smooth transition when hovering and unhovering, but can't use JS for it. My animations work great, but the unhover animation plays upon the page loading.

Is there a better way to reverse the animation on unhover?

Here's my hover animation:

.new-anim:hover {
    animation: notch 300ms ease-in;
    animation-fill-mode: forwards;
}

@keyframes notch {
    0% {clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    25% {clip-path: polygon(0% 12.5%, 7.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
    50% {clip-path: polygon(0% 25%, 15% 0%, 100% 0%, 100% 100%, 0% 100%);}
    75% {clip-path: polygon(0% 37.5%, 22.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
    100% {clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

And here's my unhover:

.new-anim {
    animation: denotch 300ms ease-out;
    animation-fill-mode: forwards;
}

@keyframes denotch {
    0% {clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);}
    25% {clip-path: polygon(0% 37.5%, 22.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
    50% {clip-path: polygon(0% 25%, 15% 0%, 100% 0%, 100% 100%, 0% 100%);}
    75% {clip-path: polygon(0% 12.5%, 7.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
    100% {clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

Set the reverse animation and it flowed correctly, but it plays the animation when the page first loads.


Solution

  • You don't need animation for that. A simple transition can do it.

    .anime {
      height: 100px;
      background: red;
      clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
      transition: .3s ease-in;
    }
    
    .anime:hover {
      clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    <div class="anime"></div>