我正在尝试创建一个脉冲动画,但是,这些步骤是同时运行的,而不是按顺序运行的。
我想要的是让我的盒子到达中心,脉动,然后回到起点。发生的事情是它到达中心,但同时增长,然后在返回的途中返回脉冲。
代码如下:
input[type="checkbox"]:checked + #test{
-webkit-animation:pulse 5s;
}
#test{
width:50px;
height:50px;
border:1px solid black;
position:relative;
}
@-webkit-keyframes pulse{
33%{
left:100px;
top:100px;
}
66%{
width:100px;
height:100px;
}
73%{
width:50px;
height:50px;
}
83%{
width:100px;
height:100px;
}
100%{
left:0px;
top:0px;
}
最佳答案
您必须明确声明属性必须在步骤之间保持不变,如果您希望这样做的话。动画会单独处理属性,因此如果您只在一个步骤中指定宽度和高度,left 和 top 将立即开始动画到适用于他们的下一站,忽略不适用的
以此为例:
33%{
left:100px;
top:100px;
width: 50px;
height: 50px;
}
66%{
left: 100px;
top: 100px;
width:100px;
height:100px;
}
73%{
left: 100px;
top: 100px;
width:50px;
height:50px;
}
83%{
left: 100px;
top: 100px;
width:100px;
height:100px;
}
100%{
width: 50px;
height: 50px;
left:0px;
top:0px;
}
因为在 66% 时我指定了与 33% 时相同的左侧和顶部,他们知道在这两个停靠点之间根本不要改变。
我不确定这是否正是您想要发生的动画,但您应该能够从中得到灵感,否则如果您遇到问题,请告诉我。
关于CSS3 强制顺序动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19184133/