title: CSS Animation Timing Issue on Delay
body: <p>I have two animations running together.</p>
  <ol>
  <li>The first one for the border that runs for an infinite amount of times for a duration of 2 seconds.</li>
  <li>The second one for the actual element that also runs for an infinite amount of times every 2 seconds for a duration of 0.1 seconds.</li>
  </ol>
  <p>Basically I want the element to bump (i.e scale 1.05) at the beginning of each border scale. To do that I'm delaying the element animation until de border animation runs each cycle.</p>
  <p>I am using this trick <a href="https://css-tricks.com/css-keyframe-animation-delay-iterations/" rel="nofollow noreferrer">https://css-tricks.com/css-keyframe-animation-delay-iterations/</a> to help with the element bump delay but for a reason I cannot understand, the timing on when the bump happens keeps constantly changing. (if you pay attention for around 1 minute you can notice this).</p>
  <p>I'm interested in knowing why this is happens or if there is a better way of doing what I want.</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>.container {
    position: relative;
    width: 100px;
    height: 100px;
    background: pink;
    border-radius: 50%;
    margin: 50px auto;
    animation: containerAnimation 2.1s infinite;
  }
  
  .animated-border {
    position: absolute;
    left: 0;
    width: 97px;
    height: 97px;
    border: 2px solid;
    border-radius: 50%;
    animation: borderAnimation 2s infinite;
  }
  
  @keyframes containerAnimation {
  
    0% {
      transform: scale3d(1, 1, 1);
    }
  
    5% {
      transform: scale3d(1.05, 1.05, 1);
    }
    
    100% {
      transform: scale3d(1.05, 1.05, 1);
    }
  }
  
  @keyframes borderAnimation {
    0% {
      transform: scale3d(1, 1, 1);
      opacity: 1;
    }
    
    100% {
      transform: scale3d(2, 2, 1);
      opacity: 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="animated-border"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>