title: staggering animations seamlessly with css animation-delay
body: <p>I am working on a CSS animation and I have run into a problem when trying to add an event to add some dynamic animations to the page.</p>
  
  <p>To make it simple, here is the looping animation for a "sky" div:</p>
  
  <pre><code>.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;}
  }
  </code></pre>
  
  <p>As you can see, it loops between colors, corresponding to the time of day.</p>
  
  <p>Then, using a jQuery event listener bound to a button, I add an "animating" class to the body to loop to a new animation:</p>
  
  <pre><code>    .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);}
  
  }
  </code></pre>
  
  <p>I add a delay to the animation because I have other parts that need to finish before displaying the background color in the keyframes.</p>
  
  <p>My problem is that instead of delaying the animation (like I gave it of 22 sec), it just turns the background color to white until the 22 seconds are up.</p>
  
  <p>Is there any way to have it continue the previous animation until the animation-delay queues the "animating" one to start?</p>
  
  <p>Here's a link to jsfiddle for clarification: <a href="http://jsfiddle.net/benjtinsley/UDzh7/" rel="nofollow">http://jsfiddle.net/benjtinsley/UDzh7/</a></p>