CODEWITHSUNDEEP
csshtmlanimationsvgcss-animations
Myriam Lefebvre
Myriam Lefebvre

Reputation: 123

Animation svg stroke not complete

I have a little problem with a stoke animation with my logo in svg. I have a animation with the : stroke-dashoffset propriety in CSS.

But the logo on hover not do all the animation completely. The logo is suppose to made a animation to build up himself with line. The animation work but not completely.

Check my jsfiddle to see the problem with the code. https://jsfiddle.net/ytkL4b5d/ The HTML

<div id="logo">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 733.9 500" style="enable-background:new 0 0 733.9 500;" xml:space="preserve">
                    <polygon class="logo" id="XMLID_56_" points="193.7,39.2 193.7,454.2 228.4,454.2 228.4,454.2 469,454.2 469,419.5 228.4,419.5 228.4,131.2 
                        366.9,288.8 505.2,129.9 505.2,454.2 539.9,454.2 539.9,37.2 366.7,236.1  "/>
                    <path class="logo" id="XMLID_101_" d="M47.3,85.2c0,16.8,2.4,33,4.8,49.8c2.4,16.8,4.8,33.6,4.8,50.4c0,21-6,44.4-48.6,44.4v30.6
                        c42.6,0,48.6,25.8,48.6,44.4c0,16.2-2.4,32.4-4.8,48.6c-2.4,16.2-4.8,33-4.8,49.2c0,60.6,37.2,82.2,87,82.2h12.6v-33h-10.8
                        c-33.6,0-47.4-18.6-47.4-52.2c0-14.4,1.8-28.2,4.2-43.2c2.4-14.4,4.2-29.4,4.2-45.6c0.6-38.4-16.2-58.8-43.2-65.4v-1.2
                        c27-7.2,43.8-26.4,43.2-64.8c0-16.2-1.8-30.6-4.2-45.6c-2.4-14.4-4.2-28.8-4.2-42.6c0-32.4,12-51.6,47.4-51.6h10.8v-33h-12.6
                        C83.3,6.6,47.3,30,47.3,85.2z"/>
                    <path class="logo" id="XMLID_102_" d="M675.5,185.4c0-16.8,2.4-33.6,4.8-50.4c2.4-16.8,4.8-33,4.8-49.8c0-55.2-36.6-78.6-87.6-78.6h-12v33h10.8
                        c34.8,0.6,47.4,19.2,47.4,51.6c0,13.8-2.4,28.2-4.2,42.6c-2.4,15-4.8,29.4-4.8,45.6c0,38.4,16.8,57.6,43.2,64.8v1.2
                        c-26.4,6.6-43.2,27-43.2,65.4c0,16.2,2.4,31.2,4.8,45.6c1.8,15,4.2,28.8,4.2,43.2c0,33.6-14.4,51.6-48,52.2h-10.2v33h12.6
                        c49.2,0,87-21.6,87-82.2c0-16.2-2.4-33-4.8-49.2c-2.4-16.2-4.8-32.4-4.8-48.6c0-18.6,6-44.4,48.6-44.4v-30.6
                        C681.5,229.8,675.5,206.4,675.5,185.4z"/>
                </svg>
</div>

The CSS (scss):

#logo{
    width:120px;
    height:auto;
    float:left;
    margin-left:20px;
    margin-top:0px;
.logo{
        width: 120px;
        height: auto;
        padding: 5px;
        fill: #000;
        animation: dashreverse 5s ease;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;
        -o-transition: all 400ms ease-in-out;
        transition: all 400ms ease-in-out;
    }
    &:hover{
        .logo{
            fill: transparent;
            stroke: #000;
            stroke-width: 4px;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 1000;
            stroke-dashoffset: 0;
            transition: .2s;
            animation: dash 4s ease;
        }
    }
}
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

**I think maybe the problem is how my svg is made. I use Illustrator to make it and generate a svg.

Upvotes: 1

Views: 918

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The problem is your dasharray length of 1000. For the animation to work correctly, the length you use has to match the path lengths of your elements.

The path lengths of your elements are much greater than 1000. The "M" has a length of 2977, and yhe two brackets have lengths of 1277 and 1276.

If you set your dasharray and start dashoffset to the longest of these three lengths, the animation will complete.

.logo{
   ...
   stroke-dasharray: 2977;
   ...
}

and

@keyframes dash {
  from {
    stroke-dashoffset: 2977;
  }
  to {
    stroke-dashoffset: 0;
  }
}

https://jsfiddle.net/ytkL4b5d/1/

However this means that the brackets, being shorter, finish much sooner than the "M". If you don't like that, you could have two animations. A long one for the M and a short one of 1277 for the brackets.

Upvotes: 1

Related Questions