kevin/Popsu-coloque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animated background

Browse Source
This commit is contained in:
ouidade
2024-04-18 23:11:59 +02:00
parent f77bf9cc74
commit 5439f74b73
10 changed files with 772 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/colloque2024/css/configs/animation.scss
+98 -113
View File
@@ -1,123 +1,108 @@
@keyframes animateCircle_pop_trans {
0% {stroke: #000000; /* Initial stroke color */}
100% {stroke: #ff0000; /* Final stroke color */}
}
@keyframes animateCircle_pop_trans-2 {
0% {fill: #ffffff; /* Initial fill color */}
100% {fill: #00ff00; /* Final fill color */}
}
/* 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 animateCircle_vert_clair_erable {
0% {stroke: #000000; /* Initial stroke color */}
100% {stroke: #ff0000; /* Final stroke color */}
}
@keyframes animateCircle_vert_clair_erable-93 {
0% {fill: #ffffff; /* Initial fill color */}
100% {fill: #00ff00; /* Final fill color */}
}
@keyframes animateCircle_vert_clair_erable-9 {
0% {stroke: #000000; /* Initial stroke color */}
100% {stroke: #ff0000; /* Final stroke color */}
}
@keyframes animateCircle_vert_clair_erable-3 {
0% {fill: #ffffff; /* Initial fill color */}
100% {fill: #00ff00; /* Final fill color */}
}
@keyframes animateCircle_vert_clair_erable-3-1 {
0% {stroke: #000000; /* Initial stroke color */}
100% {stroke: #ff0000; /* Final stroke color */}
}
@keyframes animateCircle_vert_clair_erable-3-1-7 {
0% {fill: #ffffff; /* Initial fill color */}
100% {fill: #00ff00; /* Final fill color */}
}
@keyframes pulse {
0% {transform: scale(0);}
100% {transform: scale(.5);}
}
@keyframes animateCircle_vert_erable {
0% {stroke: #000000; /* Initial stroke color */}
100% {stroke: #ff0000; /* Final stroke color */}
}
@keyframes animateCircle_vert_erable-4 {
0% {fill: #ffffff; /* Initial fill color */}
100% {fill: #00ff00; /* Final fill color */}
}
@keyframes animateCircle_vert_erable-4-6 {
0% {stroke: #000000; /* Initial stroke color */}
100% {stroke: #ff0000; /* Final stroke color */}
}
@keyframes animateCircle_vert_erable-4-3 {
0% {fill: #ffffff; /* Initial fill color */}
100% {fill: #00ff00; /* Final fill color */}
}
@keyframes animateCircle_vert_erable-2 {
0% {stroke: #000000; /* Initial stroke color */}
100% {stroke: #ff0000; /* Final stroke color */}
}
@keyframes translateAnimation {
0% {
transform: translateX(0); /* Start translation */
}
50% {
transform: translateX(200);
}
100% {
transform: translateX(500px); /* End translation */
}
}
@keyframes slidein {
from {transform: translateX(20%);}
to {transform: translateX(70%);}
}
@keyframes animateCircle_orange-7 {
0% {stroke: #000000; /* Initial stroke color */}
100% {stroke: #ff0000; /* Final stroke color */}
}
@keyframes animateCircle_orange-2 {
0% {fill: #ffffff; /* Initial fill color */}
100% {fill: #00ff00; /* Final fill color */}
}
@keyframes dropDown {
from {transform: translateY(20%);}
to {transform: translateY(70%);}
}
@keyframes animateCircle_orange-9 {
0% {stroke: #000000; /* Initial stroke color */}
100% {stroke: #ff0000; /* Final stroke color */}
}
@keyframes animateCircle_orange {
0% {fill: #ffffff; /* Initial fill color */}
100% {fill: #00ff00; /* Final fill color */}
}
@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 */}
}
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
/* 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);
}
/* Add more keyframes for other paths as needed */
#circle_pop_trans {
animation-name: translateAnimation;
animation-duration:13s;
animation-repeat:infinite;
animation-delay: 1s;
animation-fill-mode: none; }
#circle_orange-6 {
animation: slidein 2s infinite alternate; /* Animate fill color */
100% {
transform: translateX(100px) ;
}
/* Apply animations to other paths similarly */
}
@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 */
}
}