112 lines
2.4 KiB
SCSS
112 lines
2.4 KiB
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 */
|
|
}
|
|
}
|