CSS3强制顺序动画

我正在尝试创建一个脉冲动画，但是，这些步骤是同时运行的，而不是按顺序运行的

我想要的是我的盒子进入中心，脉冲，然后回到起点。发生的事情是，它去到中心，但同时增长，然后在返回的过程中返回脉冲

代码如下：

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;
 }

}

---

如果希望属性在两个步骤之间保持不变，则必须明确说明属性必须保持不变。。动画会单独设置属性，因此，如果只在一个步骤中指定宽度和高度，则“左”和“上”将立即开始设置动画，直到应用于它们的下一个停止，而忽略不适用于它们的停止

以此为例:

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%时相同的左侧和顶部，他们知道在这两个停止之间根本不会改变

---

我不确定这是否正是你想要的动画，但你应该能够从中得到想法，否则如果你有问题，请告诉我。

你必须明确声明，如果你希望属性在两个步骤之间保持不变，那么属性必须保持不变。。动画会单独设置属性，因此，如果只在一个步骤中指定宽度和高度，则“左”和“上”将立即开始设置动画，直到应用于它们的下一个停止，而忽略不适用于它们的停止

以此为例:

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%时相同的左侧和顶部，他们知道在这两个停止之间根本不会改变

---

我不确定这是否正是你想要的动画，但你应该能够从中获得想法，否则如果你有困难，请告诉我。

不完全是，你的动画还在不断增长。我想要的是让盒子进入中心，然后增长，然后收缩，然后增长，然后收缩，然后回到开始。不应该混合任何步骤。不完全是，你的步骤仍在增长。我想要的是让盒子进入中心，然后增长，然后收缩，然后增长，然后收缩，然后回到开始。不应该混淆任何步骤。是的，这似乎是个问题。我想知道这是一个特性，还是一个bug。因此，附加多个动画可能会很复杂。是的，这似乎是个问题。我想知道这是一个特性，还是一个bug。因此，附加多个动画可能会很复杂。