如何只用css实现手机上的按钮点击效果

Question

通过下面的代码，当点击示例元素时，示例会变大然后变小，这很好。但问题是，当我点击示例元素两次时，效果只会显示一次。
我知道这是因为示例元素仍然处于焦点状态，所以动画没有被触发。
我想只用css来解决这个问题，我该怎么办？

.sample:hover, .sample:focus {
  animation: phoneButtonEffect 0.2s linear;
}
@keyframes phoneButtonEffect {
  50% {
    transform: scale(1.1)
  }
  100% {
    transform: scale(1)
  }
}

Answer 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 元素达到所需状态的时间，在本例中为缩放(1.1)。