Question:
I have a svg image of the letter А which is made up of three elements: two parallelograms and a rectangle – a crossbar.
It is necessary to make a sequential animation of the appearance of the left inclined part of the letter first, then the right part and at the end of the animation the appearance of the crossbar.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="600" width="800" viewBox="0 0 600 800">
<g fill="#008080">
<polygon id="right"
points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/>
<polygon id="left" points="34 537,150 536,289 130,314 53,196 51"/>
<rect id="rect1" x="120" y="320" stroke-miterlimit="10" width="270" height="120"/>
</g>
</svg>Answer:
.letter {
width:200px;height:auto;
stroke-width:2.5;
stroke:#000;
fill:none;
stroke-dasharray: 0 24;
}
.animateFirst { animation: 0.5s animateFirst ease-in forwards; }
.animateSecond { animation: 0.2s 0.45s animateSecond ease-out forwards; }
@keyframes animateFirst {
to { stroke-dasharray: 24 24; }
}
@keyframes animateSecond {
to { stroke-dasharray: 6 24; }
}<svg class="letter" viewbox="0 0 12 10">
<polygon class="animateFirst" points="1,11.5 6,0 11,11.5" />
<polygon class="animateSecond" points="3,6.5 9,6.5" />
</svg>Answer source :@web-tiki