我正在为我的按钮制作 Material 风格的动画。试图避免任何 JS,所以来到以下样式:
http://codepen.io/Deka87/pen/zNJyqg
//动画
.btn {
position: relative;
&:after {
content: '';
position: absolute;
top: 0; bottom: 0; left: -10%; right: -10%;
border-top-left-radius: 2% 50%;
border-bottom-left-radius: 2% 50%;
border-top-right-radius: 2% 50%;
border-bottom-right-radius: 2% 50%;
background-color: fade(black,5%);
transform: scale(0,1);
opacity: 0;
}
&:focus {
&:after {
animation: click-animation .6s linear;
animation-fill-mode: backwards;
}
}
}
@keyframes click-animation {
0% {
opacity: 0;
transform: scale(0,1);
}
50% {
opacity: 1;
transform: scale(.5,1);
}
100% {
opacity: 0;
transform: scale(1,1);
}
}
它的工作原理和预期的差不多(至少在 Chrome 上是这样)。问题是如果你多次点击按钮,动画只会触发一次。发生这种情况是因为按钮已经“聚焦”,所以它不会重复动画。单击按钮外的任意位置,然后再次单击按钮可解决此问题。有什么解决办法吗?
最佳答案
您可以将“&:focus”替换为“&:not(:active)”,并在页面加载期间隐藏您的按钮以处理第一个动画。此处对此有更多解释:https://www.screenfeed.fr/blog/css3-animation-on-click-without-js-0828/
关于html - 焦点重置时的 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42117251/