當內容可見時啓動css3動畫

Question

我製作了一個使用svg的動畫，現在我想知道當它顯示在屏幕上時如何激活它。嘗試滾動顯示，但它不起作用。

這裏是動畫：http://jsfiddle.net/z86026mv/148/light/

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="136.5px" height="100.15px" viewBox="0 0 136.5 100.15" enable-background="new 0 0 136.5 100.15" xml:space="preserve"> 
    <rect class="key" x="111.284" y="80.95" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" width="1.02" height="1.02"/> 
    <path class="phone" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M102.85 31.275L90.902 43.222v51.003h29.837l11.947-11.946V31.275H102.85z"/> 
    <polyline class="bottom_line" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" points="52.476 94.225 65.188 94.225 78.059 94.225 "/> 
    <line class="vert_line" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" x1="65.188" y1="94.225" x2="65.188" y2="81.969"/> 
    <polyline class="screen" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" points="120.74 22.27 120.74 5.924 3.813 5.924 3.813 81.969 82.262 81.969 "/> 

CSS

/*Animacje*/ 
svg * { 
    fill: none; 
    stroke: currentColor; 
    stroke-linecap: square; 
    stroke-linejoin: miter; 
    color: #100F0D; 
    stroke-width: 6; 
    stroke-miterlimit: 10; 
} 
.phone { 
    animation: draw 1.5s cubic-bezier(1, 0.1, 0, 0.87) alternate; 
    -webkit-animation: draw 1.5s cubic-bezier(1, 0.1, 0, 0.87) alternate; 
} 

@keyframes draw { 

    0% { 
    stroke-dashoffset: 192; 
    stroke-dasharray: 192; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    stroke-dasharray: 192; 
    } 
} 
.screen { 
    animation: screen 1.5s cubic-bezier(1, 0.1, 0, 0.87) alternate; 
    -webkit-animation: screen 1.5s cubic-bezier(1, 0.1, 0, 0.87) alternate; 
    fill-opacity: 0; 
    stroke: #000; 
    stroke-width: 6; 
} 

@keyframes screen { 

    0% { 
    stroke-dashoffset: 290; 
    stroke-dasharray: 290; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    stroke-dasharray: 290; 
    } 
} 

.bottom_line { 
    position: absolute; 
    opacity: 0; 
    -webkit-animation: bottom_line 1s cubic-bezier(1, 0.1, 0, 0.87) 1s forwards; 
     -moz-animation: bottom_line 1s cubic-bezier(1, 0.1, 0, 0.87) 1s forwards; 
     -o-animation: bottom_line 1s cubic-bezier(1, 0.1, 0, 0.87) 1s forwards; 
      animation: bottom_line 1s cubic-bezier(1, 0.1, 0, 0.87) 1s forwards; 
} 

@keyframes bottom_line { 

    0% { 
    opacity: 1; 
    stroke-dashoffset: 290; 
    stroke-dasharray: 290; 
    } 
    100% { 
    opacity: 1; 
    stroke-dashoffset: 0; 
    stroke-dasharray: 290; 
    } 
} 
.vert_line{ 
    position: absolute; 
    opacity: 0; 
    -webkit-animation: vert_line 1s cubic-bezier(1, 0.1, 0, 0.87) 1s forwards; 
     -moz-animation: vert_line 1s cubic-bezier(1, 0.1, 0, 0.87) 1s forwards; 
     -o-animation: vert_line 1s cubic-bezier(1, 0.1, 0, 0.87) 1s forwards; 
      animation: vert_line 1s cubic-bezier(1, 0.1, 0, 0.87) 1s forwards; 
} 

@keyframes vert_line { 

    0% { 
    opacity: 1; 
    stroke-dashoffset: 290; 
    stroke-dasharray: 290; 
    } 
    100% { 
    opacity: 1; 
    stroke-dashoffset: 0; 
    stroke-dasharray: 290; 
    } 
} 

.key { 
    position: absolute; 
    opacity: 0; 
    -webkit-animation: key 1s ease 1s forwards; 
     -moz-animation: key 1s ease 1s forwards; 
     -o-animation: key 1s ease 1s forwards; 
      animation: key 1s ease 1s forwards; 
} 

@keyframes key { 

    0% { 
     opacity: 0; 
     transform: translate(-35px,0px); 
     -ms-transform: translate(-35px,0px); /* IE 9 */ 
     -webkit-transform: translate(-35px,0px); /* Safari and Chrome */ 
     -o-transform: translate(-35px,0px); /* Opera */ 
     -moz-transform: translate(-35px,0px); /* Firefox */ 

    } 

    100% { 
     opacity: 1; 
     transform: translate(0,0px); 
     -ms-transform: translate(0,0px); /* IE 9 */ 
     -webkit-transform: translate(0,0px); /* Safari and Chrome */ 
     -o-transform: translate(0,0px); /* Opera */ 
     -moz-transform: translate(0,0px); /* Firefox */ 
    } 
} 
@-webkit-keyframes key { 
    0% { 
     opacity: 0; 

    } 

    100% { 
     opacity: 1; 
    } 
} 

這裏， 「服務」 一節中我已經把它。 http://flowagency.nu/index_ico.php

你有什麼想法嗎？

Thx提前。

Answer 1

可以設置SVG爲none var svg = document.getElementsByTagName("svg")[0]; svg.style.display='none';的畫面，然後當你單擊該服務選項卡上，你可以設置顯示阻止svg.style.display='block';注意下面的例子中，我沒有使用setTimeout您可以點擊做到第二步或無論你喜歡什麼

http://jsfiddle.net/z86026mv/149/