home

web/themes/custom/colloque2024/css/configs/animation.scss

@@ -63,12 +63,15 @@
     100% {stroke: #ff0000; /* Final stroke color */}
   }
   
-  @keyframes animateCircle_orange-6 {
+  @keyframes translateAnimation {
     0% {
         transform: translateX(0); /* Start translation */
       }
+    50% {
+      transform: translateX(200);
+    }
       100% {
-        transform: translateX(50px); /* End translation */
+        transform: translateX(500px); /* End translation */
       }
   }
 
@@ -92,15 +95,28 @@
     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: animatePath1 2s infinite alternate; /* Animate stroke color */
-  }
+    animation-name: translateAnimation;
+    animation-duration:13s; 
+    animation-repeat:infinite;
+    animation-delay: 1s; 
+    animation-fill-mode: none;  }
   
   #circle_orange-6 {
-    animation: animateCircle_orange-6 2s infinite alternate; /* Animate fill color */
+    animation: slidein 2s infinite alternate; /* Animate fill color */
   }
   
   /* Apply animations to other paths similarly */