Início / user-28504180

Tyler's questions

Martin Hope
Tyler
Asked: 2025-02-25 20:01:13 +0800 CST
  • 5

Estou trabalhando em algumas animações de hover para botões em CSS. Quero que os botões tenham uma transição suave ao passar o mouse e ao não passar o mouse, mas não posso usar JS para isso. Minhas animações funcionam muito bem, mas a animação de não passar o mouse é reproduzida no carregamento da página.

Existe uma maneira melhor de reverter a animação ao passar o mouse?

Aqui está minha animação de hover:

.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%);}
}

E aqui está meu 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%);}
}

Defina a animação reversa e ela fluiu corretamente, mas reproduz a animação quando a página é carregada pela primeira vez.

css