1

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

我想要的是让我的盒子去中心，脉动，然后回到起点。正在发生的事情是它到达中心，但同时增长，然后在返回的路上脉动返回。

这是代码：

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

}

http://jsfiddle.net/cMXBf/

4

1 回答 1

1

您必须明确声明属性必须在步骤之间保持相同，如果您希望它这样做.. 动画单独执行属性，因此如果您仅在一个步骤中指定宽度和高度，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% 时相同的左侧和顶部，所以他们知道在这两个站点之间根本不会改变。

如果你想发生，我不确定这是否正是动画，但你应该能够从中得到想法，否则如果你有麻烦，请告诉我。

于 2013-10-04T15:55:04.893 回答