Css ：活动即使在释放鼠标按钮时也保持动画

css代码：

.container .elements:active{
    animation: click 1s;
}
/*animations */

@keyframes click{
    0%{border:solid;
        border-color: white;
        height: 100%;}
    50%{border:solid;
        border-color: blue;
        height:50%}
    100%{border:solid;
        border-color: white;
        height: 100%;}
}

---

当我这样做时，如果我松开鼠标按钮，它不会显示整个1s动画，如果使用单击，我如何显示整个动画？

一个简单有趣的方法是使用复选框状态

<div class='container'>
    <input id='check' type='checkbox'/>
    <label class='elements' for='check'>aaaa</label>
</div>

这确实很简单，但在语义上并不正确

真正的答案： html

#check:checked~ .elements{animation: click 1s;}
input{display: none;}

<div class='container'>
    <div id='element1' onclick='ani()'>Element</div>
</div>

<script type="text/javascript">
    function ani(){
        document.getElementById('element1').className ='animateclass';
        setTimeout(function(){
            document.getElementById("element1").classList.remove("animateclass");
        }, 1000);
    }
</script>

.animateclass{animation: click 1s;}