アニメーションを行うには、ページが完全に読み込まれた後に始まりますか？

-1

私はアニメーションを持っています（#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>

出典

2016-06-20 Anvar Erkinov

こんにちはアンバー、あなたの問題に合ったHTMLコードなしであなたの質問を理解するのは難しいです。あなたはそれをテストして解決策を見つけるためにHTMLを投稿できますか？ – wick3d

@ wick3d done ... –

HTMLをアップロードしていただきありがとうございます。

私が間違っていると私を修正しますが、ページが読み込まれたときにロゴをアニメーション化して自分自身を描きたいと思います。

ロゴタイプが同じ場合は、1つのアニメーションで最初のSVGロゴ自体をアニメートできます。 2つの必要はありません。

これはまさにそうです。

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; 
    } 
}

これはあなたの問題を解決しない：

ここで基本的なアニメーションがですか？

出典

2016-06-21 08:41:32 wick3d

アニメーションを行うには、ページが完全に読み込まれた後に始まりますか？

答えて

関連する問題