Вот смотрите, когда находишься в блоке с анимацией и просто колесиком мышки верх в низ на 1px, анимация постояно запускается.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
body {
height:2000px;
}
.anim-1 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 2.5s linear alternate forwards ;
}
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
90% {
fill-opacity: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
.anim-2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash2 4.5s linear alternate forwards ;
}
@keyframes dash2 {
0% {
fill-opacity: 0;
}
50% {
fill-opacity: 0;
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
</style>
<script type="text/javascript">
function goSVG() {
var buff = document.getElementById('svgBlock');
buff.innerHTML = buff.innerHTML;
}
</script>
</head>
<body onscroll="goSVG();">
<div style="height:500px;"></div>
<div id="svgBlock">
<svg width="450px" height="160px">
<text id="svgText" class="anim-1" x="0" y="158px" font-size="200px" stroke="#222121" stroke-width="1" fill-opacity="0">WEB</text>
</svg>
<svg width="300px" height="20px">
<line class="anim-2" fill-opacity="0" stroke="#000" stroke-width="1" x1="20" x2="300" y1="18" y2="18"/>
</svg>
</div>
</body>
</html>