Is there a way to make a trail animation in CSS only?

No problem.

The delay property name isn’t correct as well, it should be animation-delay.

Not sure you really need the delay anyway, but if you do use it, it would need to be a very low value, like 200ms (ms = milliseconds).

1 Like

I did that, still nothing.

Now, you did the opposite. You gave the right animation the same values as the left.

The right should be positive values for 0% to 50%, not negative.

@keyframes blur_right_anim {
  0% {
    transform: rotateZ(0deg);
     opacity: 0;
   } 
  25% {
    transform: rotateZ(7deg);
    opacity: 0.75;
  }
  50% {
    transform: rotateZ(14deg);
    opacity: 0.1;
    }
  62.5% {
    transform: rotateZ(-14deg);
    opacity: 0.25;
  }
  75% {
    transform: rotateZ(-7deg);
    opacity: 0.25;
  }
  100% {
    transform: rotateZ(0deg);
    opacity: 0.1;
  }
}

@keyframes blur_left_anim {
  0% {
    transform: rotateZ(0deg);
     opacity: 0;
   } 
  25% {
    transform: rotateZ(-7deg);
    opacity: 0.75;
  }
  50% {
    transform: rotateZ(-14deg);
    opacity: 0.1;
    }
  62.5% {
    transform: rotateZ(14deg);
    opacity: 0.25;
  }
  75% {
    transform: rotateZ(7deg);
    opacity: 0.25;
  }
  100% {
    transform: rotateZ(0deg);
    opacity: 0.1;
  }
}
1 Like

Crystal clear. Thank you.
https://codepen.io/33P/pen/qBaOQbr?editors=1100