我有动画(#svg_tag，.st0)。动画完成后，淡入图像(.logo_svg)。我希望动画在页面完全加载后开始(动画和图像)。
.logo_svg {
max-width: 80%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 0;
animation-name: show;
animation-delay: 11s;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
body{
background-color: grey;
}
#svg_tag {
max-width: 80%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.st0 {
fill-opacity: 0;
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 1350;
stroke-dashoffset: 1350;
animation: draw 15s linear;
animation-delay: 5s;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes show {
to {
opacity: 1;
}
}
<body>
<svg version="1.1" id="svg_tag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 708.7 437.3" style="enable-background:new 0 0 708.7 437.3;" xml:space="preserve">
<path id="XMLID_13_" class="st0" d="M708.7,285c-18.6,18.6-47.7,21.9-70,7.9v102.3l70,42V285z"/>
<path id="XMLID_12_" class="st0" d="M595.6,113.1l-113.1,67.9v7.5H509V245c0,16.6,13.4,30,30,30s30-13.4,30-30v-56.5h26.5v113.1
h-26.5v-8.6c-9,5.6-19.4,8.6-30,8.6c-31.2,0-56.5-25.3-56.5-56.5v56.5l129.6,77.8V188.5h26.5v8.6c22.3-14,51.4-10.7,70,7.9v-24.1
L595.6,113.1z"/>
<circle id="XMLID_11_" class="st0" cx="669" cy="245" r="30"/>
<path id="XMLID_10_" class="st0" d="M242.7,188.5h-9.9V245c0,25.7-20.9,46.6-46.6,46.6s-46.6-20.9-46.6-46.6v-56.5h-9.9V245
c0,31.2,25.3,56.5,56.5,56.5c18.6,0,36.1-9.2,46.6-24.5v24.5h9.9V188.5z"/>
<polyline id="XMLID_9_" class="st0" points="279.2,188.5 259.3,188.5 259.3,198.4 269.2,198.4 269.2,301.6 279.2,301.6 279.2,188.5
"/>
<path id="XMLID_8_" class="st0" d="M259.3,123c0-5.5,4.4-9.9,9.9-9.9s9.9,4.4,9.9,9.9s-4.4,9.9-9.9,9.9S259.3,128.5,259.3,123
L259.3,123z"/>
<rect id="XMLID_7_" x="295.7" y="113.1" class="st0" width="9.9" height="188.5"/>
<path id="XMLID_16_" class="st0" d="M425.4,0v213c-17.7-25.7-52.9-32.3-78.6-14.6c-25.7,17.7-32.3,52.9-14.6,78.6
c17.7,25.7,52.9,32.3,78.6,14.6c5.7-3.9,10.7-8.9,14.6-14.6v24.5h9.9V0H425.4z M378.8,291.6c-25.7,0-46.6-20.9-46.6-46.6
s20.9-46.6,46.6-46.6s46.6,20.9,46.6,46.6S404.5,291.6,378.8,291.6z"/>
<path id="XMLID_15_" class="st0" d="M103.1,213c-17.7-25.7-52.9-32.3-78.6-14.6c-5.7,3.9-10.7,8.9-14.6,14.6V0H0v301.6h9.9V277
c17.7,25.7,52.9,32.3,78.6,14.6C114.3,273.9,120.8,238.7,103.1,213z M56.5,291.6c-25.7,0-46.6-20.9-46.6-46.6s20.9-46.6,46.6-46.6
s46.6,20.9,46.6,46.6S82.3,291.6,56.5,291.6z"/>
</svg>
<img src="logo.png" class="logo_svg" alt="" />
</body>
最佳答案
感谢您上传 HTML。
如果我错了请更正我，但我认为您希望在页面加载时为 Logo 设置动画，以自行绘制。然后您想为另一个淡入淡出的 Logo 制作动画。
如果 Logo 类型相同 - 那么您可以使用一个动画为第一个 SVG Logo 本身制作动画。不需要两个:)
Here's a little codepen正是这样做的。
这是基本的动画:
svg{
max-width: 80%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.st0 {
fill-opacity: 0;
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 1350;
stroke-dashoffset: 1350;
animation: draw 5s linear forwards;
}
@keyframes draw {
95% {
stroke-dashoffset: 0;
fill-opacity:0;
stroke-width:1;
}
100%{
fill-opacity:1;
stroke-width:0;
}
}
这是否解决了您的问题？
关于css - 如何在页面完全加载后开始动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37921541/