Popsu-coloque/web/themes/custom/colloque2024/css/configs/animation.scss

/* 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);}
  100% {transform: scale(.5);}
}


@keyframes slidein {
  from {transform: translateX(20%);}
  to {transform: translateX(70%);}
}

@keyframes dropDown {
  from {transform: translateY(20%);}
  to {transform: translateY(70%);}
}

@keyframes translateAnimation {
  0% {transform: translateX(0); /* Start translation */}
  50% {transform: translateX(200);}
  100% {transform: translateX(500px); /* End translation */}
}

@keyframes changeColor {
  0% {fill: #b9ce00; /* Initial fill color */}
  100% {fill: #ff804d; /* Final fill color */}
}

@keyframes changeColor2 {
  0% {fill: #038788; /* Initial fill color */}
  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; */


}

#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 */
  }
}