所以，我在滚动时使用下面的 SVG 动画代码。该代码似乎适用于 Chrome、Safari 和 Opera 浏览器，但我不知道为什么笔画动画在 Mozilla Firefox 和 IE 中不起作用。
这里的例子：jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG animation on scroll</title>
<style>
.cir {
stroke-dasharray: 308;
stroke-dashoffset: 0;
fill-opacity: 0;
-webkit-animation: dash 1s linear forwards;
-o-animation: dash 1s linear forwards;
-moz-animation: dash 1s linear forwards;
animation: dash 1s linear forwards;
transition: fill-opacity 1s;
transition-delay: 1s;
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.circles.start .cir {
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
}
.circles.addfill .cir { fill-opacity: 1; }
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 308;
}
100% {
stroke-dashoffset: 0;
}
@keyframes dash {
0% {
stroke-dashoffset: 308;
}
100% {
stroke-dashoffset: 0;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<p>Aenean euismod semper augue, in dignissim odio congue congue. Cras sollicitudin augue ut varius bibendum. Nullam ut congue ante. Morbi pharetra dui lacinia, vulputate diam nec, ullamcorper risus. Nulla congue enim turpis, ac rhoncus odio dictum id. Fusce fermentum ullamcorper diam at imperdiet. Nulla tempor libero et arcu semper, eu luctus tortor blandit. Vivamus placerat nulla sit amet est accumsan, et tincidunt purus maximus. Sed elementum auctor sapien eu mollis. Vestibulum eu imperdiet lorem. Nam a placerat erat. Praesent dignissim ac enim sit amet malesuada. Maecenas vehicula, lacus eu vestibulum semper, dui magna dapibus odio, at venenatis lacus ex a purus. Pellentesque a nulla id nisl sagittis mattis ut ac odio. Nulla cursus porta ante, interdum rutrum erat ultrices vestibulum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<p>Aenean euismod semper augue, in dignissim odio congue congue. Cras sollicitudin augue ut varius bibendum. Nullam ut congue ante. Morbi pharetra dui lacinia, vulputate diam nec, ullamcorper risus. Nulla congue enim turpis, ac rhoncus odio dictum id. Fusce fermentum ullamcorper diam at imperdiet. Nulla tempor libero et arcu semper, eu luctus tortor blandit. Vivamus placerat nulla sit amet est accumsan, et tincidunt purus maximus. Sed elementum auctor sapien eu mollis. Vestibulum eu imperdiet lorem. Nam a placerat erat. Praesent dignissim ac enim sit amet malesuada. Maecenas vehicula, lacus eu vestibulum semper, dui magna dapibus odio, at venenatis lacus ex a purus. Pellentesque a nulla id nisl sagittis mattis ut ac odio. Nulla cursus porta ante, interdum rutrum erat ultrices vestibulum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<p>Aenean euismod semper augue, in dignissim odio congue congue. Cras sollicitudin augue ut varius bibendum. Nullam ut congue ante. Morbi pharetra dui lacinia, vulputate diam nec, ullamcorper risus. Nulla congue enim turpis, ac rhoncus odio dictum id. Fusce fermentum ullamcorper diam at imperdiet. Nulla tempor libero et arcu semper, eu luctus tortor blandit. Vivamus placerat nulla sit amet est accumsan, et tincidunt purus maximus. Sed elementum auctor sapien eu mollis. Vestibulum eu imperdiet lorem. Nam a placerat erat. Praesent dignissim ac enim sit amet malesuada. Maecenas vehicula, lacus eu vestibulum semper, dui magna dapibus odio, at venenatis lacus ex a purus. Pellentesque a nulla id nisl sagittis mattis ut ac odio. Nulla cursus porta ante, interdum rutrum erat ultrices vestibulum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<p>Aenean euismod semper augue, in dignissim odio congue congue. Cras sollicitudin augue ut varius bibendum. Nullam ut congue ante. Morbi pharetra dui lacinia, vulputate diam nec, ullamcorper risus. Nulla congue enim turpis, ac rhoncus odio dictum id. Fusce fermentum ullamcorper diam at imperdiet. Nulla tempor libero et arcu semper, eu luctus tortor blandit. Vivamus placerat nulla sit amet est accumsan, et tincidunt purus maximus. Sed elementum auctor sapien eu mollis. Vestibulum eu imperdiet lorem. Nam a placerat erat. Praesent dignissim ac enim sit amet malesuada. Maecenas vehicula, lacus eu vestibulum semper, dui magna dapibus odio, at venenatis lacus ex a purus. Pellentesque a nulla id nisl sagittis mattis ut ac odio. Nulla cursus porta ante, interdum rutrum erat ultrices vestibulum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<div class="circles">
<svg version="1.1" id="svg_circle1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.c1{fill::#000000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
]]>
</style>
<circle class="c1 cir" cx="50" cy="50" r="49"/>
</svg>
</div>
<div class="circles">
<svg version="1.1" id="svg_circle2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.c2{fill:#f00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
]]>
</style>
<circle class="c2 cir" cx="50" cy="50" r="49" />
</svg>
</div>
<div class="circles">
<svg version="1.1" id="svg_circle3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.c3{fill:#0ff;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
]]>
</style>
<circle class="c3 cir" cx="50" cy="50" r="49"/>
</svg>
</div>
<div class="circles">
<svg version="1.1" id="svg_circle4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.c4{fill:#000000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
]]>
</style>
<circle class="c4 cir" cx="50" cy="50" r="49"/>
</svg>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var circles = $(".circles");
$(window).on('scroll', function(){
circles.each(function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).delay(300)
.delay(i*300)
.queue(function(stroke) { $(this).addClass('start'); stroke(); })
.queue(function(fill) { $(this).addClass('addfill'); fill(); });
};
});
});
</script>
</body>
</html>