如何在屏幕上显示svg元素时立即动画？

Question

我似乎无法弄清楚如何整合javascript文件，以便在svg元素出现在屏幕上时立即为其设置动画。

我在stackoverflow上找到了一个javascript示例但由于某种原因它无法正常工作。

HTML

<section class="line-animation">
   <svg version="1.1" class="yellow-line" xmlns="http://www.w3.org/2000/svg"....etc</svg
</section>

CSS

.yellow-line {
   stroke-dasharray: 1137.627;
   animation: dash 3s ease-in;
   width: 600px;
   margin-top: -78px;
}

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

Javascript

<script>
$(document).ready(function(){
$('.yellow-line').viewportChecker({
classToAdd: 'visible',

offset: 100,

repeat: false,

callbackFunction: function(elem, action){}
});
});
</script>

谢谢！