Estoy tratando de animar un svg pero no entiendo muy bien como funcionan las propiedades stroke-dasharray: 700 (creo que es la que hace que las diferentes secciones del contorno se junten y hagan visible la forma, pero no estoy seguro), pero stroke-dashoffset: 700 no tengo idea como funciona y porque en el ejemplo esta 2 veces en 700 y en el último en cero cual es la función de esta propiedad exactamente, ¿habrá otra manera de animar estos svg o esta es la única?
Gracias por la ayuda
svg path {
stroke: #000000;
fill: #000;
stroke-dasharray: 700;
opacity: 10;
animation: animate 1.2s cubic-bezier(0, 0.23, 1, 0.1);
}
@keyframes animate {
0% {
opacity: 0;
fill: none;
stroke-dashoffset: 700;
}
30% {
opacity: 3.333;
fill: none;
stroke-dashoffset: 700;
}
90% {
fill: none;
opacity: 6.66666;
}
100% {
opacity: 10;
fill: #000;
stroke-dashoffset: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="description">
<!--<h2 class="description-title">Lorem ipsum dolor.</h2>--->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 207 104" style="enable-background:new 0 0 207 104;" xml:space="preserve">
<style type="text/css">
.st0{fill:#000;stroke:#000000;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M12.55,96.85C9.98,94.28,8.7,90.87,8.7,86.6c0-3.6,1.1-6.73,3.3-9.4c2.2-2.67,5.17-4,8.9-4
c2.87,0,5.22,0.42,7.05,1.25c1.83,0.83,2.75,2.65,2.75,5.45c0,1.2-0.2,2.53-0.6,4c-1.2-1-2.23-1.68-3.1-2.05
c-0.87-0.37-1.83-0.55-2.9-0.55c-2.2,0-3.92,0.73-5.15,2.2c-1.23,1.47-1.85,3.2-1.85,5.2c0,2.33,0.7,4.08,2.1,5.25
c1.4,1.17,2.97,1.75,4.7,1.75c1.6,0,2.95-0.32,4.05-0.95c1.1-0.63,2.08-1.83,2.95-3.6c0.87-1.77,1.7-4.35,2.5-7.75L49.1,12
c-4.47,1.8-7.93,4.57-10.4,8.3c-2.47,3.73-3.7,8.27-3.7,13.6c0,2.47,0.23,4.18,0.7,5.15c0.47,0.97,0.7,1.52,0.7,1.65
c-3.6,0-6.28-0.75-8.05-2.25c-1.77-1.5-2.65-3.98-2.65-7.45c0-4.27,1.75-8.42,5.25-12.45c3.5-4.03,7.98-7.3,13.45-9.8
C49.87,6.25,55.33,5,60.8,5h4l-15,71c-1.73,8.2-4.6,14.37-8.6,18.5c-4,4.13-9.9,6.2-17.7,6.2C18.77,100.7,15.12,99.42,12.55,96.85z
"/>
<path class="st0" d="M63.5,76.6c-2.87-2.53-4.3-6.53-4.3-12c0-4.53,0.93-9.57,2.8-15.1c1.87-5.53,4.87-10.32,9-14.35
c4.13-4.03,9.33-6.05,15.6-6.05c8.53,0,12.8,5.33,12.8,16v0.1c0.2,0.07,0.57,0.1,1.1,0.1c2.2,0,4.73-0.58,7.6-1.75
c2.87-1.17,5.47-2.58,7.8-4.25l0.9,2.7c-1.93,2.07-4.45,3.82-7.55,5.25c-3.1,1.43-6.48,2.45-10.15,3.05
c-0.53,6.07-1.9,11.37-4.1,15.9c-2.2,4.53-5.03,8.03-8.5,10.5c-3.47,2.47-7.23,3.7-11.3,3.7C70.27,80.4,66.37,79.13,63.5,76.6z
M84,68.65c1.6-1.83,3-4.33,4.2-7.5c1.2-3.17,2.07-6.68,2.6-10.55c-1.8-0.4-2.7-1.8-2.7-4.2c0-2.73,1.03-4.53,3.1-5.4
c-0.13-2.2-0.47-3.72-1-4.55c-0.53-0.83-1.47-1.25-2.8-1.25c-2.2,0-4.33,1.6-6.4,4.8c-2.07,3.2-3.73,7.03-5,11.5
c-1.27,4.47-1.9,8.4-1.9,11.8c0,3.2,0.37,5.35,1.1,6.45c0.73,1.1,2.07,1.65,4,1.65C80.8,71.4,82.4,70.48,84,68.65z"/>
<path class="st0" d="M131.65,77.35c-1.9-2.17-2.85-4.85-2.85-8.05c0-1.4,0.17-2.98,0.5-4.75c0.33-1.77,0.68-3.48,1.05-5.15
c0.37-1.67,0.62-2.73,0.75-3.2c0.53-2.33,1.03-4.63,1.5-6.9c0.47-2.27,0.7-4.1,0.7-5.5c0-3.4-1.2-5.1-3.6-5.1
c-1.73,0-3.27,0.85-4.6,2.55c-1.33,1.7-2.4,3.92-3.2,6.65L115.1,80h-14.4l14.5-68l14.8-2l-5.4,25.2c3.33-3.73,7.23-5.6,11.7-5.6
c3.4,0,6.1,0.93,8.1,2.8c2,1.87,3,4.7,3,8.5c0,1.93-0.23,4.08-0.7,6.45c-0.47,2.37-1.13,5.25-2,8.65
c-0.53,2.07-1.02,4.08-1.45,6.05c-0.43,1.97-0.65,3.52-0.65,4.65c0,1.33,0.3,2.37,0.9,3.1c0.6,0.73,1.63,1.1,3.1,1.1
c2,0,3.6-0.72,4.8-2.15c1.2-1.43,2.4-3.65,3.6-6.65h4.2c-2.47,7.33-5.32,12.25-8.55,14.75c-3.23,2.5-6.58,3.75-10.05,3.75
C136.53,80.6,133.55,79.52,131.65,77.35z"/>
<path class="st0" d="M181.7,77.4c-1.6-2.13-2.4-4.83-2.4-8.1c0-1.4,0.17-2.98,0.5-4.75c0.33-1.77,0.68-3.48,1.05-5.15
c0.37-1.67,0.62-2.73,0.75-3.2c0.53-2.33,1.03-4.63,1.5-6.9c0.47-2.27,0.7-4.1,0.7-5.5c0-3.4-1.2-5.1-3.6-5.1
c-1.73,0-3.27,0.85-4.6,2.55c-1.33,1.7-2.4,3.92-3.2,6.65L165.6,80h-14.4l10.6-50h14.4l-1.1,5.2c3.33-3.73,7.23-5.6,11.7-5.6
c3.4,0,6.1,0.93,8.1,2.8c2,1.87,3,4.7,3,8.5c0,1.93-0.23,4.08-0.7,6.45c-0.47,2.37-1.13,5.25-2,8.65
c-0.53,2.07-1.02,4.08-1.45,6.05c-0.43,1.97-0.65,3.52-0.65,4.65c0,1.33,0.3,2.37,0.9,3.1c0.6,0.73,1.63,1.1,3.1,1.1
c1.6,0,2.7-0.2,3.3-0.6c-0.4,3.4-1.62,5.97-3.65,7.7c-2.03,1.73-4.48,2.6-7.35,2.6C185.86,80.6,183.3,79.53,181.7,77.4z"/>
</g>
</svg>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit autem deserunt numquam et reprehenderit, nobis eligendi asperiores quasi animi error eius nam sed aliquam dolorum adipisci incidunt ex assumenda nulla.Minus quae optio illo esse .</p>
<a href="" id="see-more">Ver mas</a>
</div>
</body>
</html>