html - 当内容可见时启动 css3 动画

Question

我已经使用 svg 制作了一个动画，现在我想知道当它显示在屏幕上时如何激活它。尝试使用 Scroll Reveal，但它不起作用。

这是动画: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

你有什么想法吗？

提前致谢。

Answer 1

您可以将 svg 的显示设置为无 var svg = document.getElementsByTagName("svg")[0];
svg.style.display='none'; 然后当你点击服务选项卡时你可以设置显示 block svg.style.display='block'; 看例子下面我使用 setTimeout 完成了第二步，您可以通过点击或任何您喜欢的方式来完成

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