123 lines
3.3 KiB
SCSS
123 lines
3.3 KiB
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 */
|
|
|