html - 焦点重置时的 CSS 动画

Question

我正在为我的按钮制作 Material 风格的动画。试图避免任何 JS，所以来到以下样式:

http://codepen.io/Deka87/pen/zNJyqg

//动画

.btn {
    position: relative;

    &:after {
        content: '';
        position: absolute;
        top: 0; bottom: 0; left: -10%; right: -10%;
        border-top-left-radius: 2% 50%;
        border-bottom-left-radius: 2% 50%;
        border-top-right-radius: 2% 50%;
        border-bottom-right-radius: 2% 50%;
        background-color: fade(black,5%);
        transform: scale(0,1);
        opacity: 0;
    }

    &:focus {

        &:after {
            animation: click-animation .6s linear;
            animation-fill-mode: backwards;
        }
    }
}

@keyframes click-animation {
    0% {
        opacity: 0;
        transform: scale(0,1);
    }
    50% {
        opacity: 1;
        transform: scale(.5,1);
    }
    100% {
        opacity: 0;
        transform: scale(1,1);
    }
}

它的工作原理和预期的差不多(至少在 Chrome 上是这样)。问题是如果你多次点击按钮，动画只会触发一次。发生这种情况是因为按钮已经“聚焦”，所以它不会重复动画。单击按钮外的任意位置，然后再次单击按钮可解决此问题。有什么解决办法吗？

Answer 1

您可以将“&:focus”替换为“&:not(:active)”，并在页面加载期间隐藏您的按钮以处理第一个动画。此处对此有更多解释:https://www.screenfeed.fr/blog/css3-animation-on-click-without-js-0828/