title: Run two different simultaneous animations on a loop with CSS?
body: <p>I am using images that float across, then fade out. (Some do the opposite, fade in.) It works the first time through the loop, but when it comes through the second time the fading just cuts out. </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>.candycane {
    width: 128px;
    height: 128px;
    position: absolute;
    background: transparent url(https://i.stack.imgur.com/qM90U.png) 0 0 no-repeat;
  }
  
  .candycane_drift {
    top: 55px;
    z-index: 100;
    animation: drift 15s linear infinite, 3s fadeOut 12s ease-in;
  }
  
  @keyframes drift {
    from {
      transform: translateX(-175px);
    }
    to {
      transform: translateX(400px);
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="candycane candycane_drift"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>