title: Having multiple animations at the same time CSS3
body: <p>Depending on my environment, the following animation is either aligned (color of charts DOES NOT change during the animation) or completely off.</p>
  
  <p>I suspect this is due to me starting multiple animations and they start at different times. </p>
  
  <p>How would you align the animations / force them to start at the same time?
  +
  I need to change some values in the keyframes without actually animating them (in this case, the color) - thus, I created several steps at .99% and transition them to the next full number - is this the correct approach?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes swinging {
    0%{
      transform: rotate(-65deg);
      opacity: 0;
      transform-origin: center bottom;
    }
    0.01%{
      transform: rotate(-65deg);
      opacity: 1;
      transform-origin: center bottom;
    }
    30%{
      opacity: 1;
      transform: rotate(0);
      transform-origin: center bottom;
    }
    99.99%{
      opacity: 1;
      transform: rotate(0);
      transform-origin: center bottom;
    }
    100% {
      opacity: 0;
      transform-origin: center bottom;
    }
  }
  @keyframes changeContent{
      0%{
        color: #fbd977;
        content: "\f1fe";
    }
    19.99% {
      content: '\f1fe';
      color: #fbd977;
    }
      20.00%{
        color: #ed9286;
        content: "\f201";
      }
    39.99% {
        content: "\f201";
      color: #ed9286;
    }
      40.00%{
        color: #d992bc;
        content: '\f200';
      }
    59.99% {
        content: '\f200';
      color: #d992bc;
    }
      60.00%{
        color: #84bbe6;
        content: '\f080';
      }
    79.99% {
         color: #84bbe6;
        content: '\f080';
    }
      80.00%{
        color: #aed292;
        content: '\f0ce';
      }
    99.99% {
        color: #aed292;
        content: '\f0ce';
    }
  }
  
  .fa:before {
              animation: changeContent calc(15s/3) infinite;
  }
  
  .fa {
    font-size: 5em!important;
   animation: swinging calc(3s/3) cubic-bezier(0,2,.58,1) forwards infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  &lt;div id="loading"&gt;
    &lt;span class="foo fa-fw fa fa-area-chart"&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>