CODEWITHSUNDEEP
csscss-animations
Bastien Stingel
Bastien Stingel

Reputation: 21

Animation-delay property isn't working in loop

I want to make an animation where each path is displayed one after the other and that over and over again. (Loop)

I have used these 2 Properties: "animation-delay: 1s;" and "animation-iteration-count: infinite;"

:root{
  --pink: #e6187e;
  --green-100: green;
  --white: white;
}

body{
  background-color: #1f2937;
}

@keyframes fadeInOut { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
}

.octagon.animate{

  
  .octagon_outline1,
  .octagon_outline2,
  .octagon_outline3{

  
    animation-name: fadeInOut;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    
    animation-direction: reverse;
    animation-fill-mode: forwards;
  }
  
  
  .octagon_outline1{animation-duration: 1s; animation-delay: 1s;}
  .octagon_outline2{animation-duration: 1s; animation-delay: 2s;}
  .octagon_outline3{animation-duration: 1s; animation-delay: 3s;}

  
}
  
   <svg xmlns="http://www.w3.org/2000/svg" class="octagon animate" viewBox="0 0 500 480">
    <path d="m189.06 102.25 120.95-.04 84.83 80.68v114.99l-84.81 80.56H189.05l-84.89-80.55V182.8l84.9-80.55z" class="octagon_center"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="23" d="M179.31 79.05 319.7 79l98.46 94.25v134.31l-98.43 94.12H179.3l-98.53-94.1V173.14l98.54-94.09z" class="octagon_outline octagon_outline1"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="23" d="m165.22 46.51 169.27-.06L453.2 160.33v162.29L334.52 436.34H165.21l-118.8-113.7V160.2L165.22 46.51z" class="octagon_outline octagon_outline2"/>
    <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="23" d="m150.71 11.57 198.33-.07 139.08 134.29v191.37l-139.05 134.1H150.69L11.5 337.18V145.63L150.71 11.57z" class="octagon_outline octagon_outline3"/>
  </svg>

But the command "animation-delay: 1s;" is only shown in the first run and is not used after that.

You can find my code here: https://codepen.io/bastidesign/pen/eYyxZao

It have to look like this: gif animation Octagon

Could you help me out?

Upvotes: 2

Views: 876

Answers (1)

adabuyaman
adabuyaman

Reputation: 107

The animation-delay property delays the start of the animation only, but after it’s started it runs continuously. What you want is to have a delay between iterations, which is doable but not using animation-delay, it's not a straightforward thing.

Here's a solution that could get the job done: CSS Keyframe Animation with Delay Between Iterations

Upvotes: 1

Related Questions