jquery - css animation-delay を使用してアニメーションをシームレスにずらします

Question

私は CSS アニメーションに取り組んでおり、イベントを追加していくつかの動的アニメーションをページに追加しようとしたときに問題が発生しました。

簡単にするために、「空」div のループ アニメーションを次に示します。

.sky {
width:100%;
height: 100%;
position: absolute;
z-index: 1;
-webkit-animation: animation-sky 30s linear infinite;
}

@-webkit-keyframes animation-sky{
0%, 100% {background-color: rgb(53, 110, 231);}
16% {background-color: skyblue;}
21% {background-color: orange;}
31% {background-color: rgb(19, 2, 61);}
77% {background-color: rgb(19, 2, 61);}
82% {background-color: orange;}
92% {background-color: skyblue;}
}

ご覧のとおり、時刻に応じて色がループします。

次に、ボタンにバインドされた jQuery イベント リスナーを使用して、「アニメーション化」クラスを本体に追加し、新しいアニメーションにループします。

    .animating .sky {
    -webkit-animation: scene2-sky 38s linear 1;
    -webkit-animation-delay: 22s;
}

@-webkit-keyframes scene2-sky{
        0% {background-color: rgb(19, 2, 61);}
        100% {background-color: rgb(19, 2, 61);}

}

キーフレームに背景色を表示する前に終了する必要がある他の部分があるため、アニメーションに遅延を追加します。

私の問題は、アニメーションを遅らせる代わりに（22秒与えたように）、22秒が経過するまで背景色を白に変えるだけです。

animation-delay が「アニメーション」を開始するキューに入れるまで、前のアニメーションを継続させる方法はありますか?

明確化のためのjsfiddleへのリンクは次のとおりです。http://jsfiddle.net/benjtinsley/UDzh7/