アニメーションが終了するとSVGは一杯になりません

Question

私の名前はDanielGötzです。現在私のポートフォリオのWebサイトで作業していますが、問題があります。私のSVGアニメーションは終了しても書き込まれません。

私のウェブサイト：http://20162.hosts.ma-cloud.nl/portfoliowebsite/

あなたが呼ばH1までスクロールした場合：「Mijnスキル」あなたは、Photoshopのロゴがアニメーションされて見ることができます。しかし、私はアニメーションが終了したら一杯にしたい。

アニメーションが終了したらもう少し埋めることができますか？

HTML：

  <div class="photoshop"> 
    <svg id="mySVG" class="finishe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 486"><defs><style>.a{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>adobesave</title><path class="a" d="M321.27,328.414c-16.269,0-37.082-7.252-47.173-13.307l-9.743,39.2c13.307,7.252,33.866,12.3,56.916,12.3,50.361,0,76.376-24.124,76.376-57.012-.379-25.891-14.412-42.887-47.932-54.333C328.177,247.626,321.4,243.3,321.4,235.044c0-8.988,7.506-14.412,20.813-14.412,15.136,0,30.177,5.8,38.185,10.122l9.714-37.839c-10.817-5.424-29.168-10.091-49.76-10.091-43.58,0-71.676,24.88-71.676,57.644-.379,20.938,13.655,40.774,50.139,52.976,20.432,6.906,25.856,11.194,25.856,20.182C344.668,322.644,337.762,328.414,321.27,328.414Z" transform="translate(0.5 0.5)"/><path class="a" d="M141.687,276.194h0v86.845H87.353V123.446C104.225,120.61,128,118.4,161.489,118.4c33.9,0,58.021,6.4,74.167,19.456,15.64,12.2,25.983,32.417,25.983,56.194,0,23.744-7.881,43.957-22.42,57.643-18.6,17.6-46.417,25.479-78.834,25.479A139.4,139.4,0,0,1,141.687,276.194Zm.1-114.182h0v71.675c4.7,1.011,10.373,1.357,18.257,1.357,29.168,0,47.3-14.758,47.3-39.669-.125-22.3-15.545-35.572-43.01-35.572C153.261,159.8,145.629,160.907,141.782,162.012Z" transform="translate(0.5 0.5)"/><path class="a" d="M0,0V485H485V0ZM455,455H30V30H455Z" transform="translate(0.5 0.5)"/></svg> 
      </div> 

CSS：

.photoshop { 
height: 100px; 
    width: 100px; 
    opacity: 0; 
} 

.js-photoshop-animate{ 
    opacity: 1; 
} 

.rzzhgcav_0 { 
    stroke-dasharray: 27046 27048; 
    stroke-dashoffset: 27047; 
    animation: rzzhgcav_draw_0 4000ms ease-in-out 0ms forwards; 
} 


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

/* Style */ 
#mySVG * { 
    fill-opacity: 0; 
    transition: fill-opacity 1s; 
} 

#mySVG finished * { 
    fill-opacity: 1; 
} 

JAVASCRIPT：

var $photoshop = $('.photoshop'); 

$photoshop.waypoint(function(){ 

    console.log('Waypoint!'); 
    $photoshop.addClass('js-photoshop-animate rzzhgcav_0'); 
}, {offset: '90%'} ); 

/* JavaScript */ 
new Vivus('mySVG', {}, function (obj) { 
    obj.el.classList.add('finished'); 
}); 

Answer 1

がで複数の属性を含めます

プロパティが指定されていない場合：あなたはkeyframe「を介して実行」あなたがしたいプロパティを省略する場合は重複することができ、個々のプロパティのアニメーションの

開始と終了：アニメーション、transitionをオフのままにキーフレームの場合、または指定されているが無効な場合、そのキーフレームが存在しないかのように、そのプロパティのアニメーションが実行されます。

.rzzhgcav_0 { 
    stroke-dasharray: 27046 27048; 
    stroke-dashoffset: 27047; 
    animation: rzzhgcav_draw_0 5000ms 0ms forwards; 
} 

@keyframes rzzhgcav_draw_0 { 
    0% { 
    stroke-dashoffset: 27047; 
    fill-opacity: 0 
    animation-timing-function: ease-in-out 
    } 
    50% { 
    fill-opacity: 0 
    animation-timing-function: linear 
    } 
    80% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    fill-opacity: 1 
    } 
}