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

Question

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 动画，如果使用单击，我该如何显示整个动画？

Answer 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;}

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

:active keep animation even when we release the mouse button

css

animation

keyframe

真实答案：