0

私はこのアニメーションを持っています:

#button-1
{
   -webkit-animation: leaf-rotation-1 1s linear 1 alternate 1.5s;
}

#button-2
{
   -webkit-animation: leaf-rotation-2 1s linear 1 alternate 4s;
}

#button-3
{
   -webkit-animation: leaf-rotation-3 1s linear 1 alternate 5.5s;
}

ご覧のとおり、それらは 1.5、4、5.5 秒で実行されます。さて、最後の (5.5 での) 終了時に、どうすれば最初のものを再開できますか?

4

1 に答える 1

2

私が考えている解決策では、適切なタイミングで 3 つの異なるアニメーションを作成し、それらをループで無限に実行する必要があります。

コンセプトの実例はこちら

したがって、最初のアニメーションは 33% で終了し、2 番目のアニメーションは 33 で開始して 66 で終了し、最後は 66-100 で実行されます。これは無限に実行されます。

CSS:

@-webkit-keyframes width-1 {
    0% {
        width: 100px;
    }
    17% {
        width: 500px;
    }
    33% {
        width: 100px;
    }
}
@-webkit-keyframes width-2 {
    33% {
        width: 100px;
    }
    50% {
        width: 500px;
    }
    66% {
        width: 100px;
    }
}
@-webkit-keyframes width-3 {
    66% {
        width: 100px;
    }
    83% {
        width: 500px;
    }
    100% {
        width: 100px;
    }
}
div {
    background: red;
    width: 100px;
}

#div1 {
    -webkit-animation: width-1 1s infinite linear;
}

#div2 {
    -webkit-animation: width-2 1s infinite linear;
}

#div3 {
    -webkit-animation: width-3 1s infinite linear;
}

HTML

<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>
于 2012-07-04T15:06:07.903 に答える