animated background

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

@@ -1,11 +1,3 @@
-/* Link the SVG file */
-body {
-  /* background-image: url('../images/fond-ronds.svg'); */
-  /* Add other background properties as needed */
-  width: 100%;
-  height: 100vh; /* Adjust as needed */
-  background-size: cover; /* Adjust as needed */
-}
 
 
 @keyframes pulse {
@@ -15,13 +7,13 @@ body {
 
 
 @keyframes slidein {
-  from {transform: translateX(20%);}
-  to {transform: translateX(70%);}
+  from {transform: translateX(0%);}
+  to {transform: translateX(100%);}
 }
 
 @keyframes dropDown {
-  from {transform: translateY(20%);}
-  to {transform: translateY(70%);}
+  from {transform: translateY(0%);}
+  to {transform: translateY(100%);}
 }
 
 @keyframes translateAnimation {
@@ -40,72 +32,15 @@ body {
   100% {fill: #349a84; /* Final fill color */}
 }
 
-  
-/* Apply styles to the SVG paths
-#circle_pop_trans,
-#circle_pop_trans-2,
-/* Add other SVG IDs or classes here */
-#circle_orange{
-  /* Add styles to your SVG paths */
-  /* Example animation */
-  /* animation: pulse 2s infinite alternate; */
-  /* animation: dropDown 2s infinite alternate; */
-  /* animation: pulse 2s infinite alternate; */
-
 
+@keyframes traceAppear {
+  0% {opacity: 0;}
+  70%{opacity: 0;}
+  100% {opacity: 1;}
+}
+#path_circle_vert_clair_erable_2{
+  animation: traceAppear 2.5s forwards;
 }
 
-#cercle_vert_erable-4-3{
-  animation: changeColor2 2s forwards;
-}
-  
-/* Apply styles to the SVG paths */
-#circle_vert_clair_erable-3-1
-{
-  animation: changeColor 2s forwards;
-  /* animation: slidein 2s infinite alternate; */
-
-}
-
-#circle_orange-7{
-  /* animation: changeColor 2s infinite alternate; */
-} 
 
 
-
-
-
-#circle_orange-6 {
-  /* Main animation for the football */
-animation: football-motion 2s linear infinite; 
-}
-
-#circle_orange-6-bis {
-  /* Trailing effect animation */
-  filter: url("#blur");
-
-   animation: trace-motion 2s linear infinite; 
-   filter: url("#blur");
-  }
-
-@keyframes football-motion {
-  0% {
-    transform: translateX(0) translateY(0);
-  }
-  100% {
-    transform: translateX(100px) ;
-  }
-}
-
-@keyframes trace-motion {
-  0% {
-    opacity: 0.5; /* Adjust the opacity to control the visibility of the trace */
-    /* Additional properties for the trailing effect */
-    transform: translateX(0px) translateY(0); /* Adjust as needed */
-  }
-  100% {
-    opacity: 0.3; /* Make the trace disappear at the end */
-    /* Additional properties for the trailing effect */
-    transform: translateX(100px) ; /* Adjust as needed */
-  }
-}