I managed to animate an icon, but only the stroke. I cannot for the life of me manage to make the fill opacity go from 0 to 1. Can someone PLEASE help me
Show us what you have so far.
1 Like
<!DOCTYPE html>
<title>animacao</title>
<style type="text/css">
.container{
margin: 100px;
}
.imagem {
height: 300px;
width: 200px;
}
</style>
</head>
<body>
<!-- <img src="predio.SVG" class="imagem">-->
<div class="container">
<svg class="imagem" version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 38 61" style="enable-background:new 0 0 38 61;" xml:space="preserve">
<style type="text/css">
.pre0{fill:none;stroke:#151D40;stroke-miterlimit:10;}
.pre1{fill:#151D40;stroke:#151D40;stroke-width:0.1;stroke-miterlimit:10;}
.pre0 {
stroke-dashoffset: 800;
stroke-dasharray: 800;
animation-name: padda;
animation-duration: 12s ;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
}
@keyframes padda {
to {
stroke-dashoffset: 0;
}
}
</style>
<g>
<g>
<rect x="9.6" y="16.2" class="pre0" width="24" height="3.7"/>
<polygon class="pre0" points="11.2,19.9 11.2,54 19.4,54 19.4,56.7 31.3,56.7 31.3,19.9 "/>
<rect x="3.9" y="56.8" class="pre0" width="5.7" height="2.3"/>
<polygon class="pre0" points="7.1,54 7.1,56.7 9.6,56.7 9.6,59.1 19.4,59.1 19.4,54 "/>
<rect x="24.9" y="49.6" class="pre0" width="3.7" height="6.9"/>
<line class="pre0" x1="19.2" y1="59.1" x2="34" y2="59.1"/>
<path class="pre0" d="M31.3,56.7H34c0,0,0.1-3.5,0-4.5c-0.1-1.1-0.8-1.7-1.3-1.9S31.3,50,31.3,50"/>
<g>
<rect x="13.9" y="42.4" class="pre0" width="2" height="8.7"/>
<line class="pre0" x1="13.9" y1="46.9" x2="15.9" y2="46.9"/>
</g>
<g>
<rect x="19.8" y="42.4" class="pre0" width="2" height="8.7"/>
<line class="pre0" x1="19.8" y1="46.9" x2="21.8" y2="46.9"/>
</g>
<g>
<rect x="20.3" y="25.4" class="pre0" width="2" height="8.7"/>
<line class="pre0" x1="20.3" y1="29.9" x2="22.3" y2="29.9"/>
</g>
<g>
<rect x="13.9" y="25.4" class="pre0" width="2" height="8.7"/>
<line class="pre0" x1="13.9" y1="29.9" x2="15.9" y2="29.9"/>
</g>
<g>
<rect x="26.5" y="25.4" class="pre0" width="2" height="8.7"/>
<line class="pre0" x1="26.5" y1="29.9" x2="28.5" y2="29.9"/>
</g>
<line class="pre0" x1="24.5" y1="46.8" x2="29.2" y2="46.8"/>
<line class="pre0" x1="24.5" y1="42.4" x2="29.2" y2="42.4"/>
<line class="pre0" x1="25.2" y1="22.6" x2="29.8" y2="22.6"/>
<line class="pre0" x1="18.9" y1="22.6" x2="23.5" y2="22.6"/>
<line class="pre0" x1="12.5" y1="22.6" x2="17.2" y2="22.6"/>
<line class="pre0" x1="11.2" y1="38.9" x2="31.3" y2="38.9"/>
</g>
<g id="grupo">
<animate attributeName="opacity" from="0" to="0" dur="3s" begin="0s" fill="freeze" />
<animate attributeName="opacity" from="0" to="1" dur="2s" begin="2.5s" fill="freeze" />
<polygon class="pre1" points="26.1,15.5 32.2,15.5 32.1,14.9 26.3,14.9"/>
<path class="pre1" d="M27.6,6.2c0.3,0.2,0.7,0.4,1.1,0.2c0.2-0.1,0.6-0.2,0.9-0.3C30.1,6,30.4,6.4,30.3,7c-0.1,0.7-0.4,1.2-0.8,1.7
c-0.7,0.9-1.5,1.6-2.5,2.1c-0.3,0.1-0.6,0.2-0.9,0.2c-0.5,0-0.9-0.3-0.7-0.8c0.1-0.4,0.2-0.7,0.4-1c0.2-0.4,0.1-0.7-0.2-1
c-0.5,0.7-0.9,1.5-0.9,2.4c0,0.5,0.2,0.9,0.6,1.2c1.5,1.1,3.6,1,5-0.2C31,10.8,31.7,10,31.9,9c0.2-1.2-0.1-2.3-0.9-3.3
c-0.3-0.4-0.8-0.4-1.3-0.4C29.1,5.4,28.1,5.8,27.6,6.2z"/>
<path class="pre1" d="M31.1,11.3h0.7l-0.2,0.4h-0.8C30.9,11.6,31,11.4,31.1,11.3z"/>
<path class="pre1" d="M31.7,14.7h-2.6h-2.6c0,0-0.4-0.7-0.1-1.9c0.5,0.2,1,0.2,1.5,0.2c0.9,0,1.9-0.4,2.6-1.1H31
c0,0,0.5-0.1,0.7,0.4C32.1,13.7,31.7,14.7,31.7,14.7z"/>
<path class="pre1" d="M25.1,6.5l-0.8-0.8c-0.2-0.2-0.2-0.4,0-0.6l0,0c0.2-0.2,0.4-0.2,0.6,0l0.8,0.8c0.2,0.2,0.2,0.4,0,0.6l0,0
C25.5,6.6,25.2,6.6,25.1,6.5z"/>
<path class="pre1" d="M23.6,5l-0.8-0.8c-0.2-0.2-0.2-0.4,0-0.6l0,0c0.2-0.2,0.4-0.2,0.6,0l0.8,0.8c0.2,0.2,0.2,0.4,0,0.6l0,0
C24,5.1,23.7,5.1,23.6,5z"/>
<path class="pre1" d="M28,7.4l-0.8-0.3c-0.1-0.3-0.4-0.5-0.7-0.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.3,0.2,0.6,0.5,0.7l0.3,0.9
c0.1,0.2,0.3,0.3,0.5,0.3s0.3-0.3,0.3-0.5L27.2,8l0.7,0.2c0.2,0.1,0.4-0.1,0.5-0.3C28.4,7.7,28.2,7.4,28,7.4z"/>
</g>
</g>
</div>
</body>
</html>
basicaly, i wanted the stroke for the satelite to show up before the stroke
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.