From 10150c3ca1e9ee9b11abaf576b7d35eb235ce182 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 12 Jul 2024 22:44:03 +0200 Subject: [PATCH] animation pilliers --- .../dist/assets/css/bundle.css | 16 ++++++++++------ .../src/assets/scss/pages/home.scss | 18 ++++++++++++------ 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 316ea2f..b26fcc4 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -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 { stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 3s; + animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; + animation-direction: alternate; /* Animation en aller-retour */ } #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-2-path367 { stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 7s; + animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */ + animation-delay: 10s; + animation-direction: alternate; /* Animation en aller-retour */ } #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 { stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 10s; + animation: fillAnimation 8s ease-in-out; /* Animation de remplissage sur 2 secondes */ + animation-delay: 15s; + animation-direction: alternate; /* Animation en aller-retour */ + animation-iteration-count: infinite; /* Animation infinie */ } @keyframes fillAnimation { from { diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss index ad5e58b..385f02e 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss @@ -579,21 +579,27 @@ #paragraph-id--7 .colone-picto svg #pillier-1-path365{ stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 3s; + animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; + animation-direction: alternate; /* Animation en aller-retour */ + } #paragraph-id--7 .colone-picto svg #pillier-2-path367{ stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 7s; + animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */ + animation-delay: 10s; + animation-direction: alternate; /* Animation en aller-retour */ + } #paragraph-id--7 .colone-picto svg #pillier-3-path369{ stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 10s; + animation: fillAnimation 8s ease-in-out; /* Animation de remplissage sur 2 secondes */ + animation-delay: 15s; + animation-direction: alternate; /* Animation en aller-retour */ + animation-iteration-count: infinite; /* Animation infinie */ }