CSS animation on focus reset

Question

I am working on a material style animation for my buttons. Was trying to avoid any JS, so came to the following styles:

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

// Animations

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

It works pretty much as expected (at least on Chrome). The problem is if you click the button multiple times, the animation will only fire once. This happens because the button is already "focused", so it won't repeat the animation. Clicking anywhere outside the button, then clicking on the button again fixes the issue. Any ideas how to fix this?

Answer 1

You can replace the "&:focus" by a "&:not(:active)" and hide your button during page loading to deal with the first animation. More explanation on this here: https://www.screenfeed.fr/blog/css3-animation-on-click-without-js-0828/