我想要一个svg对象从颜色'A'淡入颜色'B',然后无限期地回到颜色'A'。如何淡入淡出svg的颜色
到目前为止,我已经使用
<animate attributeName="fill" from="colorA" to="colorB" dur="10s" repeatCount="indefinite" />
有限的成功,但是,这并不让我渐退色“A”。
任何帮助,将不胜感激。
我想要一个svg对象从颜色'A'淡入颜色'B',然后无限期地回到颜色'A'。如何淡入淡出svg的颜色
到目前为止,我已经使用
<animate attributeName="fill" from="colorA" to="colorB" dur="10s" repeatCount="indefinite" />
有限的成功,但是,这并不让我渐退色“A”。
任何帮助,将不胜感激。
使用values
属性,而不是from
任何元素和to
。
<svg>
<rect width="100%" height="100%">
<animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
您可以使用自定义的CSS动画来实现这一点:
@keyframes colorChange {
0%{fill:#ff0000}
50%{fill:#000}
100%{fill: #ff0000}
}
.box {
width:200px;
height:200px;
animation: colorChange 3s infinite;
}
只是应用animation
属性要具备补变化 http://jsfiddle.net/re8tn1o3/
感谢您的答复必须得试试这个。很好的机会让我学习css动画中的关键帧。 – soulrain
非常感谢你,这正是我所需要的! – soulrain