Question

我一直试图使用短划线技术动画我自己的一些SVG图标（动画中风和偏移）。

这就是我提出的：

<button class="startAnimation">Start Animation</button>
<div class="svgHolder">

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg id="line-icon-statisticsearch" version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 128 128" xml:space="preserve">
    <g>
        <path class="path path-circle" fill="none" stroke="#DBDDE4" stroke-width="5" stroke-miterlimit="10" d="M111.6,51c0,24.8-20.1,44.9-44.9,44.9
            c-9.5,0-18.4-3-25.7-8.1C29.3,79.8,21.7,66.3,21.7,51c0-24.8,20.1-44.9,44.9-44.9S111.6,26.2,111.6,51z"/>
        <line class="path path-magnify-line" fill="none" stroke="#DBDDE4" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="34.9" y1="98.2" x2="41.5" y2="88.3"/>
        <path class="path path-magnify-handle" fill="none" stroke="#DBDDE4" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M21.1,121.1l-2.2-1.4c-2.4-1.6-3.1-4.8-1.6-7.2l8.2-12.8c1.6-2.4,4.8-3.1,7.2-1.6l2.2,1.4c2.4,1.6,3.1,4.8,1.6,7.2l-8.2,12.8
            C26.7,122,23.5,122.7,21.1,121.1z"/>
        <polyline class="path path-chart1" fill="none" stroke="#DBDDE4" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        26.3,68.8 41.5,52.7 55.2,64.5 67.2,48.3         "/>
        <line class="path path-chart2" fill="none" stroke="#DBDDE4" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="94.1" y1="43.7" x2="110" y2="60.6"/>
        <path class="path path-star" fill="#31A4FF" d="M80.5,21.4l3.3,6.6l7.3,1.1c0.6,0.1,0.9,0.9,0.4,1.3l-5.3,5.2l1.3,7.3c0.1,0.6-0.6,1.1-1.1,0.8l-6.6-3.4
            l-6.6,3.4c-0.6,0.3-1.2-0.2-1.1-0.8l1.3-7.3L68,30.5c-0.5-0.5-0.2-1.2,0.4-1.3l7.3-1.1l3.3-6.6C79.3,20.8,80.2,20.8,80.5,21.4z"/>
    </g>
</svg>
</div>

<style>
.path {
    stroke-dasharray: 300;
    stroke-dashoffset: 0!important;
}
.animate .path {
    stroke-dasharray: 300;
    stroke-dashoffset: 310!important;
    animation: dash 3s ease-out 2.0s;
}

.animate #line-icon-statisticsearch .path-circle {
   animation: dash 2s ease-out 0.0s; 
}

.animate #line-icon-statisticsearch .path-magnify-handle {
    animation: dash 5s ease-out 0.3s; 
}
.animate #line-icon-statisticsearch .path-magnify-line {
    animation: dash 8s ease-out 0.7s; 
}

.animate #line-icon-statisticsearch .path-chart1 {
    animation: dash 5s ease 1.0s; 
}
.animate #line-icon-statisticsearch .path-chart2 {
    animation: dash 7s ease-out 1.9s; 
}
.animate #line-icon-statisticsearch .path-star {
    animation: fadeInUp 1.0s ease 1.5s;
}

@keyframes dash {
    0% {
        stroke-dashoffset: 310;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
</style>

<script>
$( document ).ready({
    $('.startAnimation').on('click',function(e) {
        $('.svgHolder').addClass('animate');
    });
});

查看小提琴 - 我添加了一个按钮来添加动画类.. 我无法让它正常工作..

也许有人对发生的事情有了更好的了解。

祝你好运！克里斯

SVG CSS-Animation在完成后不断消失

0 个答案: