animated background

web/themes/custom/colloque2024/css-compiled/index.css

@@ -339,15 +339,6 @@ footer h2 {
   line-height: 1.5rem; }
 
 /* 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 {
   0% {
     transform: scale(0); }
@@ -356,15 +347,15 @@ body {
 
 @keyframes slidein {
   from {
-    transform: translateX(20%); }
+    transform: translateX(0%); }
   to {
-    transform: translateX(70%); } }
+    transform: translateX(100%); } }
 
 @keyframes dropDown {
   from {
-    transform: translateY(20%); }
+    transform: translateY(0%); }
   to {
-    transform: translateY(70%); } }
+    transform: translateY(100%); } }
 
 @keyframes translateAnimation {
   0% {
@@ -392,6 +383,23 @@ body {
     fill: #349a84;
     /* Final fill color */ } }
 
+@keyframes football-motion {
+  0% {
+    transform: translateX(0) translateY(0); }
+  100% {
+    transform: translateX(100px); } }
+
+@keyframes traceAppear {
+  0% {
+    opacity: 0; }
+  70% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+#path_circle_vert_clair_erable_2 {
+  animation: traceAppear 2.5s forwards; }
+
 /* Apply styles to the SVG paths
 #circle_pop_trans,
 #circle_pop_trans-2,
@@ -401,47 +409,9 @@ body {
   /* Example animation */
   /* animation: pulse 2s infinite alternate; */
   /* animation: dropDown 2s infinite alternate; */
-  /* animation: pulse 2s infinite alternate; */ }
-
-#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: pulse 2s infinite alternate; */
   /* 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 */
-  /* animation: trace-motion 2s linear infinite; */ }
-
-@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 */ } }
-
 /*!
  * Hamburgers
  * @description Tasty CSS-animated hamburgers
@@ -582,8 +552,9 @@ body {
     background-size: content;
     display: block;
     position: absolute;
-    top: 0;
-    left: 0; }
+    opacity: 0.5;
+    top: 100px;
+    left: +53px; }
 
 article.publications, article.interviews {
   margin-top: 1rem; }