css - CSS 动画辅助

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/