0

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>

最初のアニメーションの後に1つのアニメーションを再生できるようにするには、どうすればよいですか？たとえば、アニメーション「a」は、「b」が発生している間ではなく、「b」が完了した後に再生されます。

4

1 に答える 1

2

2 つ以上のアニメーションを連鎖させることができます。これは、-webkit だけを前に付けたコードです。

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

アニメーション a は 0 秒から 4 秒まで再生され、アニメーション b は 4 秒から 6 秒 (4+2) まで再生されます。2 つのアニメーションを連鎖させる例を次に示します。

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

于 2013-05-05T22:45:33.483 に答える