0
我使用下面的代码svg动画它完全在铬和歌剧工作,但它不工作在Mozilla Firefox。Svg动画不工作在Firefox - 在铬,歌剧工作
请注意,我的所有浏览器都已更新。
<defs>
<style type="text/css">
.st0{fill:#fff;;stroke:#282828;stroke-width:3;stroke-miterlimit:5;transition: .8s;}
.st0 {
stroke-dasharray: 2000;
stroke-dashoffset:0;
-webkit-animation: dash 4s linear forwards;
-o-animation: dash 4s linear forwards;
-moz-animation: dash 4s linear forwards;
animation: dash 4s linear forwards;
}
.st2{fill:#fff;;stroke:#282828;stroke-width:2;stroke-miterlimit:5;transition: .8s;}
.st2 {
stroke-dasharray: 2000;
stroke-dashoffset:0;
-webkit-animation: dash 4s linear forwards;
-o-animation: dash 4s linear forwards;
-moz-animation: dash 4s linear forwards;
animation: dash 4s linear forwards;
}
.st1{fill:#fff;;stroke:#20b21f;stroke-width:3;stroke-miterlimit:5;transition: .8s;}
.st1 {
stroke-dasharray: 2000;
stroke-dashoffset:0;
-webkit-animation: dash 4s linear forwards;
-o-animation: dash 4s linear forwards;
-moz-animation: dash 4s linear forwards;
animation: dash 4s linear forwards;
}
#logo {
cursor:pointer;
}
#logo:hover .st0 {
fill:#282828;
stroke: #282828;
transition: .8s;
stroke-opacity:0.0;
}
#logo:hover .st1 {
fill:#20b21f;
stroke: #20b21f;
transition: .8s;
stroke-opacity:0.0;
}
#logo:hover .st2 {
fill:#282828;
stroke: #282828;
transition: .8s;
stroke-opacity:0.0;
}
#logo.clickit .st0 {
fill:#282828;
stroke: #282828;
stroke-opacity:0.0;
<!-- fill-opacity:0.0;-->
}
#logo.clickit .st1 {
fill:#20b21f;
stroke: #20b21f;
stroke-opacity:0.0;
<!-- fill-opacity:0.0;-->
}
#logo.clickit .st2 {
fill:#282828;
stroke: #282828;
stroke-opacity:0.0;
<!-- fill-opacity:0.0;-->
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<script type="text/javascript">
var clicker = document.querySelector('#logo');
clicker.addEventListener('click', function() {
this.classList.toggle('clickit');
});
</script>
我使用SVG动画它在Chrome和Opera完美的工作下面的代码,但它不是在Mozilla Firefox的工作。
请注意,我的所有浏览器都已更新。
我们实际上可以运行的测试用例会更容易处理。 – 2015-03-19 09:27:29
Firefox是否支持@ -webkit-keyframes? – 2015-03-19 09:39:18
每晚都会,但是我认为它现在是一个禁用的pref。这将是一个每站点白名单的东西。所以一般来说,不,不。 – 2015-03-19 09:57:17