Question

我有几个关于CSS的问题。我有一个动画，如下所示。

<style> 
div.one
{
width:100px;
height:100px;
background:blue;
position:relative;
animation:skew ease 2s;
animation-iteration-count: infinite;
text-align:center;
border-radius:50%;
}

@keyframes myfirst
{
0% {background:red;left:0px;transform:rotat…
25% {background:yellow;left:50px;transform:r…
50% {background:green;left:100px;transform:r…
75% {background:blue;left:50px;transform:rot…
100% {background:red;left:00px;transform:rota…
}

</style>
<div class="one"></div>

我怎么能这样做才能让一个动画在第一个动画之后播放？例如，动画“a”将在“b”完成后播放，而不是在b发生时播放。

Answer 1

您可以链接2个或更多动画。这是以-webkit为前缀的代码。

-webkit-animation: a 4s linear 0s, b 2s linear 4s;

动画a将从0s到4s播放，动画b将从4s播放到6s（4 + 2）。以下是链接2个动画的示例：

http://jsfiddle.net/jtYCW/2/

CSS动画协助

1 个答案: