：即使我们释放鼠标按钮也要保持动画效果

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

发生的情况是您正在:active状态下使用动画属性。此类内的属性仅在:active状态下才适用于元素，并且在:active状态消失后，其属性将不再适用。

一种替代方法是在animation类内部的.elements属性中提供delay-

.container .elements{
animation: click 1s .01s; /* or whatever delay you want*/
}