title: How to remove usage of excess keyframes by using animation-delay?
body: <p>I'm looking through Google Polymer's source code and I found this:</p>
  
  <pre><code>/**
   * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
   *
   * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
   * guarantee that the animation will start _exactly_ after that value. So we avoid using
   * animation-delay and instead set custom keyframes for each color (as redundant as it
   * seems).
   *
   **/
  .active .spinner-layer.blue {
    -webkit-animation: blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }
  
  .active .spinner-layer.red {
    -webkit-animation: red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }
  
  .active .spinner-layer.yellow {
    -webkit-animation: yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }
  
  .active .spinner-layer.green {
    -webkit-animation: green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    animation: green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  }
  
  @-webkit-keyframes blue-fade-in-out {
    from { opacity: 1; }
    25% { opacity: 1; }
    26% { opacity: 0; }
    89% { opacity: 0; }
    90% { opacity: 1; }
    100% { opacity: 1; }
  }
  
  @keyframes blue-fade-in-out {
    from { opacity: 1; }
    25% { opacity: 1; }
    26% { opacity: 0; }
    89% { opacity: 0; }
    90% { opacity: 1; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes red-fade-in-out {
    from { opacity: 0; }
    15% { opacity: 0; }
    25% { opacity: 1; }
    50% { opacity: 1; }
    51% { opacity: 0; }
  }
  
  @keyframes red-fade-in-out {
    from { opacity: 0; }
    15% { opacity: 0; }
    25% { opacity: 1; }
    50% { opacity: 1; }
    51% { opacity: 0; }
  }
  
  @-webkit-keyframes yellow-fade-in-out {
    from { opacity: 0; }
    40% { opacity: 0; }
    50% { opacity: 1; }
    75% { opacity: 1; }
    76% { opacity: 0; }
  }
  
  @keyframes yellow-fade-in-out {
    from { opacity: 0; }
    40% { opacity: 0; }
    50% { opacity: 1; }
    75% { opacity: 1; }
    76% { opacity: 0; }
  }
  
  @-webkit-keyframes green-fade-in-out {
    from { opacity: 0; }
    65% { opacity: 0; }
    75% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }
  
  @keyframes green-fade-in-out {
    from { opacity: 0; }
    65% { opacity: 0; }
    75% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }
  </code></pre>
  
  <p>I agree that this code looks incredibly verbose, but I wasn't sure how one would go about re-expressing it using animation-delay instead of custom keyframes.</p>
  
  <p>Not all the colors seem to take a full 25% chunk. Green only takes 15%... which seems a bit odd. Nevertheless, would it be as simple as just taking the start % and multiplying it by the animation duration and setting that as the delay? How would the end-time be specified, then?</p>
  
  <p>How would this code look if the bug fix did not need to be addressed?</p>