SVG Image Animation - Auto Drawing

I created a vector in Illustrator and saved it in .svg - this is the present and future of the images.

And I got the code in svg of the image and put it on the site. I want to make an animation with this image, an animation like in this example:

link

Where the image already exists, but it is drawn whereas I make a scroll on the page. I already have skrollr.js in my code, use in other objects. But in this case svg I'm not getting it.

It does not have to be this plugin, I'm only interested in the effect of drawing being done gradually instead of appearing the image completely.

If you can not understand it very well, I'll explain it in a better way.

I can almost do the self drawing, however, at some point in the animation, the drawing goes back. The animation makes the outline, but when it finishes the outline returns. I did not catch the business morning yet. SVG is something new to me.

svg{
    display: block;
    vertical-align: bottom;
    height: auto;
    width: 100%;
    .path {
        fill-opacity: 0;
        stroke: #133754;
        fill: #133754;
        stroke-width: 1;
        stroke-dasharray: 0 1014;
        stroke-dashoffset: 1014;
        animation: draw 10s forwards linear;
    }
}

@keyframes draw {
    98%{
        stroke-dashoffset: 0; 
        stroke-dasharray: 1014 0;
        fill-opacity: 0;
    }
    100%{
        fill-opacity: 1;
    }
}

I did it differently now. I updated the above code according to some that I saw on the internet, however, I do not understand its syntax.

stroke-dashoffset: 0;
stroke-dasharray: 1014 0;

I do not know what the values mean.