我有一个按钮,我有一个CSS3动画,每次按钮获得焦点时都会生效。
动画所做的是给按钮一个小的反弹,在它所在的相同位置而不移动它。
我想要的是每次单击按钮时都会激活动画,就好像每次单击都会激活按钮上的焦点一样。
下面是我如何为按钮设置动画的示例。
.btn_animated2{
background-color: rgba(0,0,0,0.5);
color: white;
border-color: black;
height: 9mm;
width: 30%;
outline-style: none !important;
margin-left: 2mm;
}
.btn_animated2:active{
-webkit-animation: jello-horizontal 0.5s both;
animation: jello-horizontal 0.5s both;
}
.btn_animated{
background-color: rgba(0,0,0,0.5);
color: white;
border-color: black;
height: 8mm;
width: 25%;
outline-style: none !important;
margin-left: 2mm;
}
.btn_animated:focus{
-webkit-animation: jello-horizontal 0.5s both;
animation: jello-horizontal 0.5s both;
}
@-webkit-keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
<b>Con :focus</b><br><br>
<button class="btn_animated">CLICKEAME!!</button><br><br>
<b>Con :active (manteniendo un poco el mouse por cada clic)</b><br><br>
<button class="btn_animated2">CLICKEAME!!</button>
如果我使用:active
动画按钮它可以工作,但只有当鼠标位于按钮上时,如果移动它会停止动画。
这就是我用来:focus
为按钮设置动画的原因。
但是正如我解释的那样,我想实现每次单击按钮时的效果,即每次单击都会触发按钮上的动画,无论鼠标是否悬停在按钮上。
使用该事件
click
并删除并添加回启动动画的类。请注意,我添加了 0.1 秒的延迟来等待重新绘制文档。