@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 */