:active 保持动画即使我们释放鼠标按钮

【问题标题】：:active keep animation even when we release the mouse button:active 保持动画即使我们释放鼠标按钮
【发布时间】：2023-03-15 15:01:01
【问题描述】：

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 的动画，如果使用单击，我该怎么做才能显示整个动画？

【问题讨论】：

标签： css animation keyframe

【解决方案1】：

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

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

用css；

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

这很简单，但语义不正确。

真正的答案：

html;

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

javascript;

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

css;

.animateclass{animation: click 1s;}

【讨论】：