使用下面的代码，点击示例元素时，示例将变大然后变小，这很好。但是问题是，当我轻按两次示例元素时，效果只会显示一次。
我知道这是因为样本元素仍处于聚焦状态，所以不会触发动画。
我想用CSS解决这个问题，该怎么办？
.sample:hover, .sample:focus {
animation: phoneButtonEffect 0.2s linear;
}
@keyframes phoneButtonEffect {
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
可以通过：active伪类来实现。
看看这个：
.sample{
height: 10em;
width: 10em;
background-color: red;
transition: all .2s ease-in-out;
}
.sample:active {
transform: scale(1.1);
transition: .1s;
} <div class="sample">
</div>第一个.2s值是过渡将恢复到正常状态所用的值，而：active选择器中的第二个值.1s是.sample元素将达到所需状态（在这种情况下为scale）的时间（1.1）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句