为什么只按一次动画效果?

Question

我想用.div:focus伪类制作一个按钮按压动画。但它似乎只在浏览器刷新后工作一次。

我不知道如何使每次用户按下按钮时都有效…以下是HTML和CSS:

.icon {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
height: 220px;
width: 220px;
margin: 15px 0px;
background-color: #f2f3f7;
box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
border-radius: 3rem;
overflow: hidden;
}
.icon img {
width: 86%;
height: 86%;
border-radius: 50%;
}
.icon:focus {
animation: pressbtn 0.2s ease-in-out;
}
@keyframes pressbtn {
0% {
box-shadow: inset 0.6rem 0.6rem 1.2rem #d2dce9, inset -0.5em -0.5em 1em #ffffff;
}
100% {
box-shadow: none;
}
}

<a href="#" class="icon">
<img src="https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/brand-download-img-1.jpg.twimg.1920.jpg">
</a>

Answer 1

focus状态始终保持，直到您再次单击该元素的外部，所以这就是为什么您不能再次触发focus，如果您从未在当前元素上松开focus。

我建议你使用.icon:active，它将应用于每次点击你期望的元素。

.icon {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
height: 220px;
width: 220px;
margin: 15px 0px;
background-color: #f2f3f7;
box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
border-radius: 3rem;
overflow: hidden;
}
.icon img {
width: 86%;
height: 86%;
border-radius: 50%;
}
.icon:active {
animation: pressbtn 0.2s ease-in-out;
}
@keyframes pressbtn {
0% {
box-shadow: inset 0.6rem 0.6rem 1.2rem #d2dce9, inset -0.5em -0.5em 1em #ffffff;
}
100% {
box-shadow: none;
}
}

<a href="#" class="icon">
<img src="https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/brand-download-img-1.jpg.twimg.1920.jpg">
</a>

Answer 2

不使用关键帧

.icon:focus {
box-shadow: none;
}

Answer 3

您应该在.icon:focus中使用animation-iteration-count: infinite;或在.icon:focus的动画键中添加它:

.icon:focus {
animation: 0.2s ease-in-out 0s infinite pressbtn;
}

或

.icon:focus {
animation: pressbtn 0.2s ease-in-out;
animation-iteration-count: infinite;
}

Answer 4

用active代替focus。看看这里的区别。此外，在创建动画时，您需要添加forwards属性。但就我个人而言，我会不设置任何动画，而是直接将box-shadow属性设置为none。这将消除您所看到的延迟。

.icon {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
height: 220px;
width: 220px;
margin: 15px 0px;
background-color: #f2f3f7;
box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
border-radius: 3rem;
overflow: hidden;
}
.icon img {
width: 86%;
height: 86%;
border-radius: 50%;
}
.icon:active {
/* animation: pressbtn forwards 0.1s ease-in-out; */
box-shadow: none;
}
@keyframes pressbtn {
0% {
box-shadow: inset 0.6rem 0.6rem 1.2rem #d2dce9, inset -0.5em -0.5em 1em #ffffff;
}
100% {
box-shadow: none;
}
}

<a href="#" class="icon">
<img src="https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/brand-download-img-1.jpg.twimg.1920.jpg">
</a>