Start css3 animation when the content is visible - html

Question

I've made an animation using svg and now I wonder how to activate it when it shows on the screen. Tried with Scroll Reveal but it doesn't work.
Here is the animation: 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;
}
}
And here, in the "Service" section I have placed it. http://flowagency.nu/index_ico.php
Do you have any ideas?
Thx in advance.

Answer 1

you can set the display of the svg to none var svg = document.getElementsByTagName("svg")[0];
svg.style.display='none'; then when you click on the service tab you can set the display to block svg.style.display='block'; watch out the example below i did the second step using setTimeout you can do it with click or whatever you like
http://jsfiddle.net/z86026mv/149/