Partage
  • Partager sur Facebook
  • Partager sur Twitter

TIMING pour animation SVG

SVG

MathildeAhah
    17 mars 2018 à 18:13:02

    Bonjour, 

    Je souhaiterais mettre un timing pour faire une animation sur des tiges. Placées en forme de couronne j'aimerais qu'elle se dessine une à une. Au lieu de ça elle se dessine toutes en même temps. 

    Voici mon code animation CSS : 

    #_7emetige {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: dash 5s linear forwards;

    }


    #_6emetige  {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: dash 6s linear forwards;

    }


    #_5emetige {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: dash 7s linear forwards;

    }


    #_4emetige {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: dash 8s linear forwards;

    }


    #_3emetige {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: dash 9s linear forwards;

    }


    #deuxiemetige {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: dash 10s linear forwards;

    }


    #premieretige {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: dash 11s linear forwards;

    }


    @keyframes dash {

    to {

    stroke-dashoffset: 0;

    }

    }


    Voici mon code HTML : 

    <!DOCTYPE html>

    <html lang="en">

    <head>

      <meta charset="UTF-8">

      <title>ESSAI4</title>

      <meta name="viewport" content="width=device-width; initial-scale=1.0"/>

      <link rel="stylesheet" href="styles4.css"/>

      <link rel="stylesheet" href="animation4.css"/>

    </head>

    <body>

    <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 651 561">

      <defs>

      </defs>

      <title>Plan de travail 2</title>

      <g class="cls-1">

          <g id="OBJECTS">

              <g id="FLEURBLEUE">

                  <g id="FLEURBLEUbas">

                      <path class="cls-2" d="M468.9,357.86c0,11.71-3.46,13.68-7.72,13.68s-7.73-2-7.73-13.68,7.73-36.25,7.73-36.25S468.9,346.15,468.9,357.86Z"/>

                      <path class="cls-2" d="M468.9,291.55c0-11.71-3.46-13.68-7.72-13.68s-7.73,2-7.73,13.68,7.73,36.25,7.73,36.25S468.9,303.26,468.9,291.55Z"/>

                      <path class="cls-2" d="M442.07,352.88c-8.59,7.95-12.39,6.75-15.29,3.62s-3.79-7,4.81-15,31.86-18.93,31.86-18.93S450.67,344.94,442.07,352.88Z"/>

                      <path class="cls-2" d="M490.77,307.87c8.59-7.94,7.69-11.82,4.8-14.95s-6.69-4.34-15.29,3.61-21.38,30.28-21.38,30.28S482.17,315.82,490.77,307.87Z"/>

                      <path class="cls-2" d="M427.77,331.28c-11.7-.41-13.55-3.93-13.4-8.2s2.24-7.65,13.94-7.24,36,9,36,9S439.48,331.68,427.77,331.28Z"/>

                      <path class="cls-2" d="M494,333.57c11.7.41,13.79-3,13.94-7.24s-1.7-7.79-13.4-8.19-36.5,6.46-36.5,6.46S482.34,333.17,494,333.57Z"/>

                      <path class="cls-2" d="M432.82,305.86c-8-8.52-6.85-12.33-3.75-15.25s7-3.86,15,4.66S463.3,327,463.3,327,440.85,314.39,432.82,305.86Z"/>

                      <path class="cls-2" d="M478.28,354.14c8,8.53,11.89,7.59,15,4.66s4.27-6.73-3.75-15.25-30.48-21.1-30.48-21.1S470.25,345.61,478.28,354.14Z"/>

                  </g>

                  <g id="FLEURBLEUhaut">

                      <path class="cls-2" d="M397.11,107.94c-.89,11.68-4.49,13.38-8.74,13.06s-7.55-2.56-6.66-14.23,10.45-35.56,10.45-35.56S398,96.27,397.11,107.94Z"/>

                      <path class="cls-2" d="M402.14,41.82c.89-11.67-2.41-13.9-6.67-14.22s-7.85,1.38-8.74,13,5,36.73,5,36.73S401.25,53.5,402.14,41.82Z"/>

                      <path class="cls-2" d="M370.74,101c-9.18,7.27-12.87,5.78-15.52,2.44s-3.25-7.28,5.92-14.55,33.21-16.46,33.21-16.46S379.92,93.67,370.74,101Z"/>

                      <path class="cls-2" d="M422.7,59.76c9.18-7.28,8.57-11.21,5.92-14.55s-6.34-4.83-15.51,2.44S389.5,76.22,389.5,76.22,413.53,67,422.7,59.76Z"/>

                      <path class="cls-2" d="M358.12,78.32c-11.64-1.3-13.22-4.95-12.75-9.19s2.82-7.46,14.45-6.17S395,74.64,395,74.64,369.76,79.61,358.12,78.32Z"/>

                      <path class="cls-2" d="M424,85.63c11.64,1.3,14-1.92,14.45-6.16s-1.11-7.9-12.75-9.19S388.85,74,388.85,74,412.38,84.34,424,85.63Z"/>

                      <path class="cls-2" d="M365.08,53.36c-7.36-9.11-5.9-12.81-2.58-15.5s7.24-3.32,14.6,5.79S393.87,76.7,393.87,76.7,372.44,62.47,365.08,53.36Z"/>

                      <path class="cls-2" d="M406.74,104.94c7.36,9.11,11.29,8.47,14.61,5.79s4.77-6.38-2.59-15.49S390,71.89,390,71.89,399.39,95.83,406.74,104.94Z"/>

                  </g>

              </g>

              <g id="TIGES">

                  <g id="_7emetige" data-name="7emetige">

                      <path id="feuilleint7emetige" class="cls-3" d="M530.34,297.11s-20.46-43.56-54.05-39"/>

                      <path id="tigepp7emetige" class="cls-3" d="M526.67,326.62s21-72.35-37-134.35"/>

                      <path id="feuilleext7emetige" class="cls-3" d="M521.17,242.67s-3.49-42.39,21.61-60.42"/>

                      <path id="feuilleorangeext7emetige" class="cls-4" d="M545.26,249.31c12.43-7.51,28-4.56,28-4.56s-4.61,15.12-17.05,22.64-28,4.56-28,4.56S532.83,256.83,545.26,249.31Z"/>

                  </g>

                  <g id="_6emetige" data-name="6emetige">

                      <path id="tigepp6emetige" class="cls-3" d="M395,460.33s102.86-33.18,132.72-136"/>

                      <path id="tigeint6emetige" class="cls-3" d="M459.18,324.3s22.12,47.55,2.21,96.21"/>

                      <path id="feuilleint2_6emetige" class="cls-5" d="M448.66,408.57c-3,21.54-21,36.83-21,36.83s-13.24-19.61-10.27-41.14,21-36.83,21-36.83S451.62,387,448.66,408.57Z"/>

                      <path id="feuilleint1_6emetige" class="cls-5" d="M413.79,418.31c12.1,9.9,14.71,26.71,14.71,26.71s-17,.77-29.1-9.13-14.7-26.71-14.7-26.71S401.69,408.41,413.79,418.31Z"/>

                      <path id="feuilleext6emetige" class="cls-5" d="M501.85,400.57c15.63.2,28.15,11.72,28.15,11.72s-12.81,11.2-28.44,11-28.15-11.72-28.15-11.72S486.22,400.36,501.85,400.57Z"/>

                  </g>

                  <g id="_5emetige" data-name="5emetige">

                      <path id="tigepp5emetige" class="cls-3" d="M397,458.9s-56.71,23.54-116,.69"/>

                      <path id="feuilleorangebas" class="cls-4" d="M364.11,481.57c8.7,7.66,11.9,18.25,7.14,23.66s-15.67,3.58-24.37-4.07-18.34-33.5-18.34-33.5S355.4,473.92,364.11,481.57Z"/>

                  </g>

                  <path id="_4emetige" data-name="4emetige" class="cls-3" d="M281.39,459.58s-35.23-8.91-52.3-35.36,8.76-42.88,17.8-36.67S263,409.83,250,422s-36.71,9.53-54.92-9.26-11-43.14-11-43.14"/>

                  <g id="_3emetige" data-name="3emetige">

                      <path id="tigepp3emetige" class="cls-3" d="M167,232.77s-26.68,72.72,17.45,135"/>

                      <path id="feuilleext3emetige" class="cls-5" d="M143.79,254.31c19.2,16.92,17,50.83,17,50.83s-33.36,6.47-52.56-10.45-17-50.83-17-50.83S124.59,237.39,143.79,254.31Z"/>

                      <path id="feuilleint3emetige" class="cls-5" d="M222.82,330.24c-17.75,18.42-51.53,14.7-51.53,14.7s-5-33.61,12.78-52,51.53-14.71,51.53-14.71S240.58,311.8,222.82,330.24Z"/>

                      <path id="feuilleblanchext" class="cls-6" d="M148.66,278.42c9.92,8.74,8.77,26.27,8.77,26.27s-17.24,3.34-27.16-5.41S121.49,273,121.49,273,138.73,269.67,148.66,278.42Z"/>

                      <path id="feuilleblancheint" class="cls-6" d="M201.12,336c-9.8,10.17-28.42,8.11-28.42,8.11s-2.75-18.54,7-28.71,28.43-8.11,28.43-8.11S210.91,325.79,201.12,336Z"/>

                  </g>

                  <g id="deuxiemetige">

                      <path id="tigepp2emetige" class="cls-3" d="M268.57,118.75s-82.2,31.68-101.83,116.73"/>

                      <path id="tigexterieur2emetige" class="cls-3" d="M222.54,232.37s-20.16-37.7-6.17-78.2"/>

                      <path id="feuilleint2_2emetige" class="cls-5" d="M227.28,163.31c1.44-17.66,15.44-30.93,15.44-30.93s11.67,15.36,10.23,33-15.44,30.93-15.44,30.93S225.84,181,227.28,163.31Z"/>

                      <path id="feuilleint1_2emetige" class="cls-5" d="M255.21,153.8C244.92,146.29,242,132.73,242,132.73s13.8-1.4,24.09,6.11,13.18,21.07,13.18,21.07S265.51,161.31,255.21,153.8Z"/>

                      <path id="feuilleexterieur2emetige" class="cls-5" d="M184.35,172.24c-12.73.54-23.44-8.26-23.44-8.26s9.92-9.7,22.65-10.24S207,162,207,162,197.08,171.69,184.35,172.24Z"/>

                  </g>

                  <g id="premieretige">

                      <path id="tigedroitepremieretige" class="cls-3" d="M263.21,120.94s71.94-44.26,113.74,4"/>

                      <path id="tigegauchepremieretige" class="cls-3" d="M315.45,100.61C344.11,80.24,332.3,45.7,332.3,45.7"/>

                      <path id="tigepppremieretige" class="cls-3" d="M383.41,76.46s-54.48,28.6-80.13,27.75"/>

                      <path id="feuilledroitepremieretige" class="cls-7" d="M383.41,123.42c8.74,9.42,9,23.41,9,23.41s-13.93-1.29-22.67-10.71-9-23.41-9-23.41S374.67,114,383.41,123.42Z"/>

                      <path id="feuillegauchepremieretige" class="cls-7" d="M340.88,39.23c2.55,12.59-4.54,24.65-4.54,24.65s-11.22-8.36-13.77-21,4.55-24.66,4.55-24.66S338.34,26.63,340.88,39.23Z"/>

                  </g>

                  <path id="feuilletournant" class="cls-5" d="M170.88,364c7.65-2,16,4.28,16,4.28s-4.08,9.62-11.73,11.66-16-4.28-16-4.28S163.23,366.07,170.88,364Z"/>

                  <path id="feuillebleubas" class="cls-5" d="M331.25,481.86c.13,7.91-8,14.47-8,14.47s-8.35-6.28-8.49-14.19,8-14.47,8-14.47S331.11,474,331.25,481.86Z"/>

                  <path id="feuillerouge" class="cls-4" d="M157.6,210.24c-10.86-2.15-18.07-12-18.07-12s10.4-6.35,21.26-4.21,19.42,5.7,18.07,12S168.46,212.38,157.6,210.24Z"/>

              </g>

              <g id="FLEURJAUNE">

                  <g id="fleurJ_soleil" data-name="fleurJ soleil">

                      <path class="cls-8" d="M176.86,66.27S191,70.44,195.51,81.08s-2.31,23.7-2.31,23.7S179.06,100.61,174.55,90,176.86,66.27,176.86,66.27Z"/>

                      <path class="cls-8" d="M196.61,111.76s14.14,4.18,18.65,14.82-2.31,23.7-2.31,23.7-14.13-4.18-18.64-14.81S196.61,111.76,196.61,111.76Z"/>

                      <path class="cls-8" d="M199.77,62.81s10.27,10.57,9,22.06-13.63,19.52-13.63,19.52-10.27-10.57-9-22S199.77,62.81,199.77,62.81Z"/>

                      <path class="cls-8" d="M194.68,112.15s10.28,10.57,9,22.06S190,153.73,190,153.73s-10.27-10.57-9-22S194.68,112.15,194.68,112.15Z"/>

                      <path class="cls-8" d="M221.4,71s3.79,14.25-3,23.64S197,105,197,105,193.22,90.75,200,81.37,221.4,71,221.4,71Z"/>

                      <path class="cls-8" d="M192.81,111.55s3.79,14.24-2.95,23.63-21.45,10.35-21.45,10.35-3.78-14.24,3-23.63S192.81,111.55,192.81,111.55Z"/>

                      <path class="cls-8" d="M235.37,87s-3.06,14.42-13.31,19.75-23.81-.45-23.81-.45,3.06-14.42,13.31-19.75S235.37,87,235.37,87Z"/>

                      <path class="cls-8" d="M191.56,110.25S188.5,124.67,178.25,130s-23.81-.45-23.81-.45,3.06-14.42,13.31-19.75S191.56,110.25,191.56,110.25Z"/>

                      <path class="cls-8" d="M240.57,106s-8.84,11.79-20.39,12.31-21.41-10.43-21.41-10.43,8.85-11.79,20.39-12.31S240.57,106,240.57,106Z"/>

                      <path class="cls-8" d="M191,108.66S182.2,120.45,170.65,121s-21.41-10.43-21.41-10.43,8.85-11.79,20.39-12.31S191,108.66,191,108.66Z"/>

                      <path class="cls-8" d="M238,123.48s-12.65,7.56-23.53,3.67-15.86-17.76-15.86-17.76,12.65-7.57,23.53-3.68S238,123.48,238,123.48Z"/>

                      <path class="cls-8" d="M191.18,107.16s-12.65,7.57-23.53,3.67-15.86-17.76-15.86-17.76,12.65-7.57,23.53-3.67S191.18,107.16,191.18,107.16Z"/>

                      <path class="cls-8" d="M230,137.61s-14.5,2.65-23.32-4.8S198,110.62,198,110.62s14.5-2.66,23.32,4.8S230,137.61,230,137.61Z"/>

                      <path class="cls-8" d="M191.81,105.93s-14.5,2.66-23.33-4.8-8.64-22.19-8.64-22.19,14.5-2.66,23.32,4.8S191.81,105.93,191.81,105.93Z"/>

                      <path class="cls-9" d="M204.32,108.11A10.23,10.23,0,1,1,194.1,97.88,10.23,10.23,0,0,1,204.32,108.11Z"/>

                  </g>

                  <g id="fleurJ_bas" data-name="fleurJ bas">

                      <path class="cls-10" d="M239.44,478c3.9-17.31,15.22-23.6,26.84-21s19.15,13.16,15.25,30.47-30.21,36-30.21,36S235.54,495.32,239.44,478Z"/>

                      <path class="cls-11" d="M260.85,499c17.22-4.26,23.27-15.71,20.41-27.28s-13.56-18.87-30.79-14.61-35.3,31-35.3,31S243.63,503.24,260.85,499Z"/>

                      <path class="cls-11" d="M272.7,495c11.65-13.38,10-26.23,1.05-34.06s-21.95-7.65-33.59,5.73S229,512.3,229,512.3,261.05,508.39,272.7,495Z"/>

                  </g>

              </g>

              <g id="FLEUROUGE">

                  <g id="fleurR_haut" data-name="fleurR haut">

                      <path class="cls-12" d="M278.91,82.72s-9.07,10.66-20,10.48S239.2,82.06,239.2,82.06s9.07-10.65,20-10.47S278.91,82.72,278.91,82.72Z"/>

                      <path class="cls-12" d="M315.7,83.33s-9.07,10.66-20,10.48S276,82.67,276,82.67,285.06,72,296,72.2,315.7,83.33,315.7,83.33Z"/>

                      <path class="cls-12" d="M278.38,81.58S281,95.32,274,103.75s-21,8.35-21,8.35-2.62-13.74,4.4-22.17S278.38,81.58,278.38,81.58Z"/>

                      <path class="cls-12" d="M301.92,53.29s2.62,13.75-4.4,22.18-21,8.35-21,8.35-2.62-13.74,4.39-22.17S301.92,53.29,301.92,53.29Z"/>

                      <path class="cls-12" d="M276.9,81.35s13.35,4.18,17.47,14.35-2.57,22.45-2.57,22.45S278.45,114,274.34,103.8,276.9,81.35,276.9,81.35Z"/>

                      <path class="cls-12" d="M263.1,47.24s13.35,4.19,17.46,14.35S278,84.05,278,84.05s-13.35-4.19-17.47-14.35S263.1,47.24,263.1,47.24Z"/>

                      <path class="cls-13" d="M283.58,82.8a6.13,6.13,0,1,1-6-6.23A6.12,6.12,0,0,1,283.58,82.8Z"/>

                  </g>

                  <g id="fleurR_extremité" data-name="fleurR extremité">

                      <path class="cls-12" d="M482.74,159.39c-.13,8.18-11.78,23.68-11.78,23.68S459.84,167.19,460,159s11.38.65,11.38.65S482.88,151.2,482.74,159.39Z"/>

                      <path class="cls-12" d="M482,203.24c.14-8.18-11-24.06-11-24.06s-11.65,15.5-11.78,23.68,11.39-.27,11.39-.27S481.88,211.42,482,203.24Z"/>

                      <path class="cls-12" d="M495.69,182c-7.39,3.51-26.45,0-26.45,0s9.28-17,16.67-20.54,4.47,10.49,4.47,10.49S503.08,178.47,495.69,182Z"/>

                      <path class="cls-12" d="M456.08,200.83c7.39-3.52,16.67-20.54,16.67-20.54s-19.06-3.54-26.45,0,5.31,10.08,5.31,10.08S448.69,204.34,456.08,200.83Z"/>

                      <path class="cls-12" d="M483.86,202.22c-7-4.24-14.53-22.1-14.53-22.1s19.32-1.62,26.32,2.62-6.3,9.5-6.3,9.5S490.86,206.46,483.86,202.22Z"/>

                      <path class="cls-12" d="M446.34,179.51c7,4.24,26.32,2.62,26.32,2.62s-7.53-17.86-14.53-22.1-5.5,10-5.5,10S439.34,175.27,446.34,179.51Z"/>

                      <path class="cls-14" d="M477,182.68a5.88,5.88,0,1,1-5.78-6A5.89,5.89,0,0,1,477,182.68Z"/>

                  </g>

              </g>

          </g>

      </g>

    </svg>

    </body>

    </html>


    Ca me pose vraiment probleme :/
    • Partager sur Facebook
    • Partager sur Twitter

    TIMING pour animation SVG

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur ●
    • Markdown