SVG анимация текста и линий

<svg height="800" width="800" style="font-size:2rem"> 
  <path id="lineAB" d="M 400 350 l 0 -280" stroke="red" stroke-width="3" fill="none" /> 
  <text id="text1" x="150" y="370" dx="-30">Example text text text text text</text> 
  <path id="lineBC" d="M 400 680 l 0 -280" stroke="red" stroke-width="3" fill="none" /> 
  <text id="text2" x="150" y="685" dx="-30">Example text text text text text</text> 
  <path id="lineCD" d="M 400 990 l 0 -280" stroke="red" stroke-width="3" fill="none" /> 
  <text id="text3" x="150" y="985" dx="-30">Example text text text text text</text> 
  <style> 
    path { 
      /* на всех путях одинаковая анимация продолжительностью 3 сек */ 
      animation: path_animation 3s forwards; 
      /* ширина штриха и пробела равны длине пути */ 
      stroke-dasharray: 280 280;  
      /* изначально ставим отрицательный отступ*/ 
      stroke-dashoffset: -280;  
    } 
 
    text { 
      /* текст с начала полностью прозрачный */ 
      opacity: 0;  
      /* анимация текста у всех одинаковая */ 
      animation: text_animation 1s forwards; 
    } 
 
    /* задержки включения анимации */ 
    #text1  {animation-delay: 3s} 
    #lineBC {animation-delay: 4s} 
    #text2  {animation-delay: 7s} 
    #lineCD {animation-delay: 8s} 
    #text3  {animation-delay: 11s} 
 
    /* анимируем сдвиг пунктира */ 
    @keyframes path_animation { 
      0%   {stroke-dashoffset: -280} 
      100% {stroke-dashoffset: 0} 
    } 
 
    /* анимируем порзрачность */ 
    @keyframes text_animation { 
      0%   {opacity: 0} 
      100% {opacity: 1} 
    } 
  </style> 
</svg>