焦点重置时的 CSS 动画

Question

我正在为我的按钮制作材质样式动画。试图避免任何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/