Popsu-coloque/web/themes/custom/colloque2024/css/configs/animation.scss

@keyframes animateCircle_pop_trans {
    0% {stroke: #000000; /* Initial stroke color */}
    100% {stroke: #ff0000; /* Final stroke color */}
  }
  
  @keyframes animateCircle_pop_trans-2 {
    0% {fill: #ffffff; /* Initial fill color */}
    100% {fill: #00ff00; /* Final fill color */}
  }

  @keyframes animateCircle_vert_clair_erable {
    0% {stroke: #000000; /* Initial stroke color */}
    100% {stroke: #ff0000; /* Final stroke color */}
  }
  
  @keyframes animateCircle_vert_clair_erable-93 {
    0% {fill: #ffffff; /* Initial fill color */}
    100% {fill: #00ff00; /* Final fill color */}
  }
  
  @keyframes animateCircle_vert_clair_erable-9 {
    0% {stroke: #000000; /* Initial stroke color */}
    100% {stroke: #ff0000; /* Final stroke color */}
  }
  
  @keyframes animateCircle_vert_clair_erable-3 {
    0% {fill: #ffffff; /* Initial fill color */}
    100% {fill: #00ff00; /* Final fill color */}
  }

  @keyframes animateCircle_vert_clair_erable-3-1 {
    0% {stroke: #000000; /* Initial stroke color */}
    100% {stroke: #ff0000; /* Final stroke color */}
  }
  
  @keyframes animateCircle_vert_clair_erable-3-1-7 {
    0% {fill: #ffffff; /* Initial fill color */}
    100% {fill: #00ff00; /* Final fill color */}
  }

  @keyframes animateCircle_vert_erable {
    0% {stroke: #000000; /* Initial stroke color */}
    100% {stroke: #ff0000; /* Final stroke color */}
  }
  
  @keyframes animateCircle_vert_erable-4 {
    0% {fill: #ffffff; /* Initial fill color */}
    100% {fill: #00ff00; /* Final fill color */}
  }

  @keyframes animateCircle_vert_erable-4-6 {
    0% {stroke: #000000; /* Initial stroke color */}
    100% {stroke: #ff0000; /* Final stroke color */}
  }
  
  @keyframes animateCircle_vert_erable-4-3 {
    0% {fill: #ffffff; /* Initial fill color */}
    100% {fill: #00ff00; /* Final fill color */}
  }
  
  @keyframes animateCircle_vert_erable-2 {
    0% {stroke: #000000; /* Initial stroke color */}
    100% {stroke: #ff0000; /* Final stroke color */}
  }
  
  @keyframes translateAnimation {
    0% {
        transform: translateX(0); /* Start translation */
      }
    50% {
      transform: translateX(200);
    }
      100% {
        transform: translateX(500px); /* End translation */
      }
  }

  @keyframes animateCircle_orange-7 {
    0% {stroke: #000000; /* Initial stroke color */}
    100% {stroke: #ff0000; /* Final stroke color */}
  }
  
  @keyframes animateCircle_orange-2 {
    0% {fill: #ffffff; /* Initial fill color */}
    100% {fill: #00ff00; /* Final fill color */}
  }

  @keyframes animateCircle_orange-9 {
    0% {stroke: #000000; /* Initial stroke color */}
    100% {stroke: #ff0000; /* Final stroke color */}
  }
  
  @keyframes animateCircle_orange {
    0% {fill: #ffffff; /* Initial fill color */}
    100% {fill: #00ff00; /* Final fill color */}
  }

  @keyframes slidein {
    from {
      transform: translateX(0%);
    }
  
    to {
      transform: translateX(100%);
    }
    
  }
  
  /* Add more keyframes for other paths as needed */
  
  #circle_pop_trans {
    animation-name: translateAnimation;
    animation-duration:13s; 
    animation-repeat:infinite;
    animation-delay: 1s; 
    animation-fill-mode: none;  }
  
  #circle_orange-6 {
    animation: slidein 2s infinite alternate; /* Animate fill color */
  }
  
  /* Apply animations to other paths similarly */