ну вот как-то так
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>SVG</title>
<style type="text/css">
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
90% {
fill-opacity: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
</style>
</head>
<body>
<div style="height:500px;"></div>
<svg width="650px" height="160px">
<text id="svgText" x="0" y="158px" font-size="200px" stroke="#222121" stroke-width="1" data-0="stroke-dasharray:1000;stroke-dashoffset:1000;animation:dash 2.5s linear alternate forwards ;" style="fill-opacity:0;">WEB</text>
</svg>
<script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
</body>
</html>