CSS3样式按钮：如何在播放时使按钮消失

Question

我一直在尝试设置一个当前在悬停时激活的CSS3按钮，每次停止/启动它都会消失。我正在尝试修改当前代码，以便播放按钮仅在单击时播放（播放/暂停操作）

以下是代码：

return (4/(x*np.sqrt(np.pi*n*s)))*np.exp(-(np.log(x,e)**2)/(2*n*s))

如果我按如下方式修改.play按钮，按钮将被修复，但是它在点击时不会消失，这意味着它在播放时会停留在动画gif上：

 .play-button {
        background-color: rgb(80,80,80);
        border: 2px solid rgb(136,136,136);
        width: 60px;
        height: 60px;
        position: absolute;
        border-radius: 30px;
        top: 50%;
        left: 50%;
        margin: -30px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.25s ease-in-out;
        -moz-transition: opacity 0.25s ease-in-out;
        -webkit-transition: opacity 0.25s ease-in-out;
        -o-transition: opacity 0.25s ease-in-out;
        transition: opacity 0.25s ease-in-out;

        &:hover {
            opacity: 3;
        }
    }

    .play-button:before {
        content: "";
        position: absolute;
        background: transparent;
        border: 14px solid transparent;
        top: 16px;
        left: 25px;
        height: 0;
        border-right-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-right: 0;
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        -ms-transition: all 250ms ease-in-out;
        -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
    }

    .play-button:after {
        content: "";
        position: absolute;
        border: 14px solid white;
        top: 15px;
        left: 24px;
        height: 0;
        border-right-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-right: 0;
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        -ms-transition: all 250ms ease-in-out;
        -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
    }

    .play-button.pause:before {
        border: 4px solid white;
        top: 18px;
        left: 18px;
        height: 16px;
    }

    .play-button.pause:after {
        content: "";
        position: absolute;
        border: 4px solid white;
        top: 18px;
        left: 33px;
        height: 16px;
    }

如何改变现状以达到我的目的？

感谢您的帮助