：悬停在 Sass 中并且动画反转

Question

我有一个带有动画的：悬停效果。

在：悬停动画中，动画完全按照我的需要运行。但是当我离开 :hover 时，我也需要动画运行，但以相反的方式运行。我使用 (:not(:hover)) 动画自动运行。

&_3 {
                box-shadow: inset 1px 1px 5px 0px #7864a7d4,
                        inset -2px -2px 6px 0px #443960e4;

                &:hover {
                        animation: 1s shadow ease-in-out forwards;
                }
                
        }

@-webkit-keyframes shadow {
        0% {
                box-shadow: inset 1px 1px 5px 0px #7864a7d4,
                            inset -2px -2px 6px 0px #443960e4;
        }

        50% {
                box-shadow: none
        }

        100% {
                box-shadow: 2px 2px 10px 0px #7864a7d4,
                            -3px -3px 12px 0px #443960e4;
        }
}

Answer 1

将“动画”从悬停样式移至基本按钮样式。