我在网上发现了这个SVG动画,它在Chrome中运行,但在Firefox中不行。我找到了很多答案,添加了-webkit-,但仍然没有用。我试图将百分比更改为translateX()中的像素,但没有。或者也许我做得不对。
https://codepen.io/anon/pen/MQRogz
HTML:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
<defs>
<clipPath id="clip-path">
<rect id="rect" x="0" y="0" height="346" width="250"/>
</clipPath>
</defs>
<path fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
<path clip-path="url(#clip-path)" fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
</svg>
CSS:
body {
background: #333;
padding: 2em;
}
svg {
display: block;
left: 50%;
max-width: 8em;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
#rect {
animation: slideOver 5s linear infinite;
}
@-webkit-keyframes slideOver {
0% {
-webkit-transform: translateX(0);
}
25% {
-webkit-transform: translateX(100%);
}
50% {
-webkit-transform: translateX(100%);
}
75% {
-webkit-transform: translateX(0);
}
}
@keyframes slideOver {
0% {
transform: translateX(0);
}
25% {
transform: translateX(100%);
}
50% {
transform: translateX(100%);
}
75% {
transform: translateX(0);
}
}
解决方案SVG
通过在同一个白色十字架上放置黑色十字架并使用移动的clipPath
到黑色十字架来实现动画。
作为clipPath
的形状轮廓,使用矩形,通过动画命令从最左侧位置移动到最右侧位置。切掉黑十字的部分,从而显示位于黑十字下方的白色十字。
通过重复属性的相同数字来实现极端位置的暂停:
values = - 250; 0; 0; -250; -250
body {
background: #333;
padding: 2em;
}
svg {
display: block;
left: 50%;
max-width: 8em;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
<defs>
<clipPath id="clip-path1">
<rect id="shadow" x="-250" y="-1" width="250" height="347" >
<animate attributeName="x" dur="4s" begin="0s" values="-250;0;0;-250;-250" repeatCount="indefinite" />
</rect>
</clipPath>
</defs>
<!-- White cross -->
<path fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
<!-- black cross along with the use of `clipPath` -->
<path clip-path="url(#clip-path1)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
</svg>
将动画分配给要动画的元素,而不是已使用的元素。改变这个:
#rect {
animation: slideOver 5s linear infinite;
}
为了这:
path:nth-child(2) {
animation: slideOver 5s linear infinite;
}
将选择器更改为您需要的任何内容。