bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animation pilliers

This commit is contained in:
ouidade 2024-07-12 22:44:03 +02:00
parent abdae701ec
commit 10150c3ca1
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -2115,20 +2115,24 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-1-path365 { #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-1-path365 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */
animation-delay: 3s; animation-delay: 5s;
animation-direction: alternate; /* Animation en aller-retour */
} }
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-2-path367 { #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-2-path367 {
stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */
animation-delay: 7s; animation-delay: 10s;
animation-direction: alternate; /* Animation en aller-retour */
} }
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 { #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 {
stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 8s ease-in-out; /* Animation de remplissage sur 2 secondes */
animation-delay: 10s; animation-delay: 15s;
animation-direction: alternate; /* Animation en aller-retour */
animation-iteration-count: infinite; /* Animation infinie */
} }
@keyframes fillAnimation { @keyframes fillAnimation {
from { from {

18
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@ -579,21 +579,27 @@
#paragraph-id--7 .colone-picto svg #pillier-1-path365{ #paragraph-id--7 .colone-picto svg #pillier-1-path365{
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */
animation-delay: 3s; animation-delay: 5s;
animation-direction: alternate; /* Animation en aller-retour */
} }
#paragraph-id--7 .colone-picto svg #pillier-2-path367{ #paragraph-id--7 .colone-picto svg #pillier-2-path367{
stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */
animation-delay: 7s; animation-delay: 10s;
animation-direction: alternate; /* Animation en aller-retour */
} }
#paragraph-id--7 .colone-picto svg #pillier-3-path369{ #paragraph-id--7 .colone-picto svg #pillier-3-path369{
stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 8s ease-in-out; /* Animation de remplissage sur 2 secondes */
animation-delay: 10s; animation-delay: 15s;
animation-direction: alternate; /* Animation en aller-retour */
animation-iteration-count: infinite; /* Animation infinie */
} }