HTML:
<svg class="asset-note-icon" viewBox="0 0 100 100">
<ellipse cx="38.3" ry="3.5" rx="2.4" cy="57.5"></ellipse>
<ellipse cx="62" ry="3.5" rx="2.4" cy="57.5"></ellipse>
<circle cx="50.1" cy="68.2" r="4.7"></circle>
</svg>
CSS:
.asset-note-icon{
width: 120px;
}
.asset-note-icon ellipse,
.asset-note-icon path,
.asset-note-icon circle{
fill: #636363;
}
.asset-note-icon ellipse{
animation: blink 50s infinite;
animation-timing-function: ease;
}
@keyframes blink {
00.00% { ry: 3.5; cy: 57.5 }
10.00% { ry: 3.5 }
10.10% { ry: 1.0 }
10.20% { ry: 3.5 }
10.30% { ry: 1.0 }
10.40% { ry: 3.5 }
20.20% { cy: 57.5 }
20.30% { cy: 50 }
22.30% { cy: 50 }
22.40% { cy: 57.5 }
45.00% { ry: 3.5 }
45.10% { ry: 1.0 }
48.10% { ry: 1.5 }
48.20% { ry: 3.5 }
99.20% { ry: 3.5 }
99.30% { ry: 1.0 }
99.40% { ry: 3.5 }
100.0% { ry: 3.5; cy: 57.5 }
}
http://jsfiddle.net/m8esm1t3/2/
我有一个使用SVG和CSS动画动画的小脸。在Chrome中,动画可以正常工作(观看它大约5秒钟),但看起来像firefox剥离了这些直接的SVG操作(rx,cx,cy等......)
有没有办法让这个在firefox中运行,或者在这个浏览器中是不可能的?