Keyframes CSS multiple delayed animations on SVG paths

Question

I'm trying to create such a sort of sequence of a loop icons showing inside my SVG design. I've tryed using an animation-delay for each path but all the paths are executed at the same time.

Here is my codepen: https://codepen.io/ioiocodepen/pen/oNYGwgE

HTML:


  

  
    CONSULENZE e PARERI AMBIENTALI
  

  
    RICORSI PER SANZIONI AMBIENTALI

CSS:

.badgeconsul svg {
    height: 100%;
    width: 100%;
}

.badgeconsul h3 {
    font-weight: bold;
    position: absolute;
    margin: auto;
    width: 100%;
}


@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    to {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
#archirotanti {
    -webkit-animation: rotating 3s linear infinite;
    -moz-animation: rotating 3s linear infinite;
    -ms-animation: rotating 3s linear infinite;
    -o-animation: rotating 3s linear infinite;
    animation: rotating 3s linear infinite;
    
    transform-box: fill-box;
    transform-origin: 50% 50%;
}



#arco1 {
    fill: #8cc63f;
    -webkit-animation: changecolorarco1 6s linear infinite;
    -moz-animation: changecolorarco1 6s linear infinite;
    -ms-animation: changecolorarco1 6s linear infinite;
    -o-animation: changecolorarco1 6s linear infinite;
    animation: changecolorarco1 6s linear infinite;
}

#arco2 {
    fill: #22b573;
    -webkit-animation: changecolorarco2 6s linear infinite;
    -moz-animation: changecolorarco2 6s linear infinite;
    -ms-animation: changecolorarco2 6s linear infinite;
    -o-animation: changecolorarco2 6s linear infinite;
    animation: changecolorarco2 6s linear infinite;
}
@keyframes changecolorarco1 {
    0% {
        fill: #22b573;
    }
    50% {
        fill: #8cc63f;
    }
    100% {
        fill: #22b573;
    }
}

@keyframes changecolorarco2 {
    0% {
        fill: #8cc63f;
    }
    50% {
        fill: #22b573;
    }
    100% {
        fill: #8cc63f;
    }
}



/* animazione paths icone servizi home */
@keyframes opacitypathicon {
    0% {opacity: 0}
    25% {opacity: 0.75}
    50% {opacity: 1}
    75% {opacity: 0.75}
    100% {opacity: 0}
}

/* elementi icone da animare */
#consulenze-ambientali, #title-consulenze-ambientali {
    opacity: 0;
    
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    
    -webkit-animation: opacitypathicon 3s linear infinite;
    -moz-animation: opacitypathicon 3s linear infinite;
    -ms-animation: opacitypathicon 3s linear infinite;
    -o-animation: opacitypathicon 3s linear infinite;
    animation: opacitypathicon 3s linear infinite;
} 
#sanzioni-ambientali, #title-sanzioni-ambientali {
    opacity: 0;
    
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-delay: 3s;
    
    -webkit-animation: opacitypathicon 3s linear infinite;
    -moz-animation: opacitypathicon 3s linear infinite;
    -ms-animation: opacitypathicon 3s linear infinite;
    -o-animation: opacitypathicon 3s linear infinite;
    animation: opacitypathicon 3s linear infinite;
}

What I want to do is something like this:

path1 -> start at time 0 -> opacity 0, then at 50% opacity at 100% then after 3sec opacity to 0 again path2 -> start at time 3s -> opacity 0, then at 50% opacity at 100% then after 3sec opacity to 0 again and so on...

Why, and how to show/hide one by one after the previous one has shown and then hidden (opacity from 0 to 100 and then 0 again).

Maybe this could not be a good way to do what I want. Any other suggestion are welcome. Thanks in advance.

Rok Benko · Accepted Answer

I'm not sure if my suggestion would help, but have you tried with other SVG attributes like begin (read more about it here)? I've worked with SVG in the past but it seems like your SVG animation is a bit more complicated, so I'm not sure if you can achieve what you want purely with SVG (but probably the answer is yes). There are many other SVG attributes. Check them out.

I also thought answers to this question might help you. I know that the question was different (or at least not exactly the same), but ignore the question. Look at the attributes that people suggested in their answers. You might get some fresh ideas how to solve your problem. Hope this will help you at least a little bit.

EDIT: THE SOLUTION

You need to put -webkit-animation BEFORE -webkit-animation-delay in order to get animation delay work. If you change this order for example in your CSS for title-consulenze-ambientali and for title-sanzioni-ambientali, you'll see that now the delay starts to work. You can see that only "CONSULENZE e PARERI AMBIENTALI" appears first and not both at the same time - but only for the first time after you refresh the snippet!

See these two snippets bellow and pay attention to the headings. I simplified your code (only these two headings, nothing else) so that you can easily follow what I'm talking about.

YOUR CODE: Both headings appear at the same time.

.badgeconsul h3 {
  font-weight: bold;
  position: absolute;
  margin: auto;
  width: 100%;
  top: 0;
}


/* animazione paths icone servizi home */

@keyframes opacitypathicon {
  0% {
    opacity: 0
  }
  25% {
    opacity: 0.75
  }
  50% {
    opacity: 1
  }
  75% {
    opacity: 0.75
  }
  100% {
    opacity: 0
  }
}


/* elementi icone da animare */

#consulenze-ambientali,
#title-consulenze-ambientali {
  opacity: 0;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: opacitypathicon 3s linear infinite;
  -moz-animation: opacitypathicon 3s linear infinite;
  -ms-animation: opacitypathicon 3s linear infinite;
  -o-animation: opacitypathicon 3s linear infinite;
  animation: opacitypathicon 3s linear infinite;
}

#sanzioni-ambientali,
#title-sanzioni-ambientali {
  opacity: 0;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation: opacitypathicon 3s linear infinite;
  -moz-animation: opacitypathicon 3s linear infinite;
  -ms-animation: opacitypathicon 3s linear infinite;
  -o-animation: opacitypathicon 3s linear infinite;
  animation: opacitypathicon 3s linear infinite;
}


  
    CONSULENZE e PARERI AMBIENTALI
  

  
    RICORSI PER SANZIONI AMBIENTALI

NOW, CHANGE THE ORDER (-webkit-animation BEFORE -webkit-animation-delay): Now the delay starts to work. You can see that only "CONSULENZE e PARERI AMBIENTALI" appears first and not both at the same time - but only for the first time after you refresh the snippet!

.badgeconsul h3 {
  font-weight: bold;
  position: absolute;
  margin: auto;
  width: 100%;
  top: 0;
}


/* animazione paths icone servizi home */

@keyframes opacitypathicon {
  0% {
    opacity: 0
  }
  25% {
    opacity: 0.75
  }
  50% {
    opacity: 1
  }
  75% {
    opacity: 0.75
  }
  100% {
    opacity: 0
  }
}


/* elementi icone da animare */

#consulenze-ambientali,
#title-consulenze-ambientali {
  opacity: 0;
  -webkit-animation: opacitypathicon 3s linear infinite;
  -moz-animation: opacitypathicon 3s linear infinite;
  -ms-animation: opacitypathicon 3s linear infinite;
  -o-animation: opacitypathicon 3s linear infinite;
  animation: opacitypathicon 3s linear infinite;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

#sanzioni-ambientali,
#title-sanzioni-ambientali {
  opacity: 0;
  -webkit-animation: opacitypathicon 3s linear infinite;
  -moz-animation: opacitypathicon 3s linear infinite;
  -ms-animation: opacitypathicon 3s linear infinite;
  -o-animation: opacitypathicon 3s linear infinite;
  animation: opacitypathicon 3s linear infinite;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
}


  
    CONSULENZE e PARERI AMBIENTALI
  

  
    RICORSI PER SANZIONI AMBIENTALI

But... You want these two headings to show in an alternating way, right? The solution is that you make two different(!) animations (i.e. opacitypathicon1 and opacitypathicon2). These two animations now has duration set to 6s not 3s. Why? The first 3s you animate title-consulenze-ambientali (the opacity: 0 for title-sanzioni-ambientali during the first 3s) and in the next 3s you animate title-sanzioni-ambientali (the opacity: 0 for title-consulenze-ambientali during the next 3s). All together it's 6s. Of course, you need to adjust the @keyframes (25% now represent 12.5%) to achieve the same animation as with your original code. Take a look at the last (and correct) snippet.

CORRECT CODE:

.badgeconsul h3 {
  font-weight: bold;
  position: absolute;
  margin: auto;
  width: 100%;
  top: 0;
}


/* animazione paths icone servizi home */

@keyframes opacitypathicon1 {
  0% {
    opacity: 0
  }
  12.5% {
    opacity: 0.75
  }
  25% {
    opacity: 1
  }
  37.5% {
    opacity: 0.75
  }
  50% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}


/* elementi icone da animare */

#consulenze-ambientali,
#title-consulenze-ambientali {
  opacity: 0;
  -webkit-animation: opacitypathicon1 6s linear infinite;
  -moz-animation: opacitypathicon1 6s linear infinite;
  -ms-animation: opacitypathicon1 6s linear infinite;
  -o-animation: opacitypathicon1 6s linear infinite;
  animation: opacitypathicon1 6s linear infinite;
}


/* animazione paths icone servizi home */

@keyframes opacitypathicon2 {
  0% {
    opacity: 0
  }
  50% {
    opacity: 0
  }
  62.5% {
    opacity: 0.75
  }
  75% {
    opacity: 1
  }
  87.5% {
    opacity: 0.75
  }
  100% {
    opacity: 0
  }
}

#sanzioni-ambientali,
#title-sanzioni-ambientali {
  opacity: 0;
  -webkit-animation: opacitypathicon2 6s linear infinite;
  -moz-animation: opacitypathicon2 6s linear infinite;
  -ms-animation: opacitypathicon2 6s linear infinite;
  -o-animation: opacitypathicon2 6s linear infinite;
  animation: opacitypathicon2 6s linear infinite;
}


  
    CONSULENZE e PARERI AMBIENTALI
  

  
    RICORSI PER SANZIONI AMBIENTALI

I had spent a few hours to find the solution and to write all this (including several snippets), so you can understand what is happening. Hope this helps. Try to do the same with other parts of your code. Have a nice day. :)

Keyframes CSS multiple delayed animations on SVG paths

Answers (1)

Related Questions