0
因此，我在滚动上使用以下代码进行SVG动画。该代码似乎可以在Chrome，Safari和Opera浏览器中使用，但我不知道为什么笔画动画在Mozilla Firefox和IE中不起作用。SVG在滚动笔画动画（CSS和jQuery）不工作在Firefox和IE浏览器 - 工作在Chrome，Safari，Opera
这里举例：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>
感谢您的建议！ 我试着添加-moz-animation-play-state，但它仍然不能在Firefox中工作。我在chrome中检查过，它说-moz-animation-play-state是未知的属性名称。不知道发生了什么......并且我在IE11中进行了测试。 –
自从版本16开始，它就是Firefox中的动画播放状态（而不是-moz-animation-play-state）。 –