CSS Animation Timing Issue on Delay-CodePudding

I have two animations running together.

The first one for the border that runs for an infinite amount of times for a duration of 2 seconds.
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.

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.

I am using this trick https://css-tricks.com/css-keyframe-animation-delay-iterations/ 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).

I'm interested in knowing why this is happens or if there is a better way of doing what I want.

.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;
  }
}

<div class="container">
  <div class="animated-border"></div>
</div>

CodePudding user response：

You have one animation that runs evert 2 seconds and another one that runs for 2.1 seconds, of course they won't sync. What you can do is set the delay in the keyframes, so instead of 0% it will start in a different value.

For example:

.container {
  position: relative;
  width: 100px;
  height: 100px;
  background: pink;
  border-radius: 50%;
  margin: 50px auto;
  animation: containerAnimation 2s 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(0.9, 0.9, 1); // I've changed it to be more noticable.
  }

  5% {
    transform: scale3d(1.05, 1.05, 1);
  }
  
  100% {
    transform: scale3d(1.05, 1.05, 1);
  }
}

@keyframes borderAnimation {
  5% { // Start from here instead from 0%.
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  
  100% {
    transform: scale3d(2, 2, 1);
    opacity: 0;
  }
}

<div class="container">
  <div class="animated-border"></div>
</div>

Since the animations now are of the same length, you can match the steps by the percent values. Here the border animation starts right after the circle finished expanding.