SVG 动画淡入淡出
SVG Fade in Animation
您好,我有一个 SVG,它是 5 个堆叠的箭头形状。我想从下往上淡入每个箭头。当顶部箭头淡入时,我希望第一个淡出,然后是第二个等等。然后通过淡入每个箭头再次开始动画。
下面是SVG代码的码笔:
https://codepen.io/anon/pen/gyJZEy
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<defs>
<style>.hg{fill:#ee2330;opacity:0}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<rect>
<animate id="hg0" begin="0;hg0.end" dur="8s"
attributeName="visibility" from="hide" to="hide"/>
</rect>
<path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
<animate id="hg1" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin;hg0.end" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
<animate id="hg2" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+1s;hg0.end+1s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
<animate id="hg3" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+2s;hg0.end+2s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z">
<animate id="hg4" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+3s;hg0.end+3s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
<animate id="hg5" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+4s;hg0.end+4s" repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
最简单的方法是使用 keyTimes
属性来控制淡入淡出时间。
我们有五个箭头。第一个用一秒钟淡入,然后等待其他四个淡入。然后用一秒钟再次淡出,并等待其他四个淡入。
这意味着每个箭头的动画总共需要 10 秒。那个动画中有五个关键时刻:
- 在0s时,不透明度值为0
- 1秒时,不透明度值为1
- 5秒时,不透明度值为1
- 6s时,不透明度值为0
- 10秒时,不透明度值为0
keyTimes
属性与 values
属性结合使用。它指定在动画中的哪个时间不透明度必须处于每个值。因此它需要具有与 values
属性中相同数量的值。关于 keyTimes
值,您需要了解的另一件事是它的时间值必须是持续时间的分数。所以上面第二次(1s),我们需要用0.1(1s of 10s)。
所以我们的 values
属性应该是 "0; 1; 1; 0; 0"
,我们的 keyTimes
属性应该是 "0; 0.1; 0.5; 0.6; 1"
.
然后为了偏移每个箭头动画的开始,我们只使用交错 begin
次。
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<defs>
<style>.hg{fill:#ee2330;opacity:0}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="1s"/>
</path>
<path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="2s"/>
</path>
<path class="hg" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="3s"/>
</path>
<path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="4s"/>
</path>
</g>
</g>
</svg>
这里是 @keyfrmes
+ animation-delay
版本:
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<style>
path {
fill: red; opacity: 0;
animation: 5.5s opacity infinite;
}
@keyframes opacity {
15% {opacity: 0}
35% {opacity: 1}
65% {opacity: 1}
85% {opacity: 0}
}
#hg2 {animation-delay: 0.5s}
#hg3 {animation-delay: 1.0s}
#hg4 {animation-delay: 1.5s}
#hg5 {animation-delay: 2.0s}
</style>
<path id="hg1" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z"></path>
<path id="hg2" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z"></path>
<path id="hg3" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z"></path>
<path id="hg4" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z"></path>
<path id="hg5" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z"></path>
</svg>
您好,我有一个 SVG,它是 5 个堆叠的箭头形状。我想从下往上淡入每个箭头。当顶部箭头淡入时,我希望第一个淡出,然后是第二个等等。然后通过淡入每个箭头再次开始动画。
下面是SVG代码的码笔: https://codepen.io/anon/pen/gyJZEy
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<defs>
<style>.hg{fill:#ee2330;opacity:0}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<rect>
<animate id="hg0" begin="0;hg0.end" dur="8s"
attributeName="visibility" from="hide" to="hide"/>
</rect>
<path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
<animate id="hg1" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin;hg0.end" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
<animate id="hg2" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+1s;hg0.end+1s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
<animate id="hg3" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+2s;hg0.end+2s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z">
<animate id="hg4" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+3s;hg0.end+3s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
<animate id="hg5" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+4s;hg0.end+4s" repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
最简单的方法是使用 keyTimes
属性来控制淡入淡出时间。
我们有五个箭头。第一个用一秒钟淡入,然后等待其他四个淡入。然后用一秒钟再次淡出,并等待其他四个淡入。
这意味着每个箭头的动画总共需要 10 秒。那个动画中有五个关键时刻:
- 在0s时,不透明度值为0
- 1秒时,不透明度值为1
- 5秒时,不透明度值为1
- 6s时,不透明度值为0
- 10秒时,不透明度值为0
keyTimes
属性与 values
属性结合使用。它指定在动画中的哪个时间不透明度必须处于每个值。因此它需要具有与 values
属性中相同数量的值。关于 keyTimes
值,您需要了解的另一件事是它的时间值必须是持续时间的分数。所以上面第二次(1s),我们需要用0.1(1s of 10s)。
所以我们的 values
属性应该是 "0; 1; 1; 0; 0"
,我们的 keyTimes
属性应该是 "0; 0.1; 0.5; 0.6; 1"
.
然后为了偏移每个箭头动画的开始,我们只使用交错 begin
次。
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<defs>
<style>.hg{fill:#ee2330;opacity:0}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="1s"/>
</path>
<path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="2s"/>
</path>
<path class="hg" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="3s"/>
</path>
<path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="4s"/>
</path>
</g>
</g>
</svg>
这里是 @keyfrmes
+ animation-delay
版本:
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<style>
path {
fill: red; opacity: 0;
animation: 5.5s opacity infinite;
}
@keyframes opacity {
15% {opacity: 0}
35% {opacity: 1}
65% {opacity: 1}
85% {opacity: 0}
}
#hg2 {animation-delay: 0.5s}
#hg3 {animation-delay: 1.0s}
#hg4 {animation-delay: 1.5s}
#hg5 {animation-delay: 2.0s}
</style>
<path id="hg1" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z"></path>
<path id="hg2" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z"></path>
<path id="hg3" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z"></path>
<path id="hg4" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z"></path>
<path id="hg5" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z"></path>
</svg>