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.
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>