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