javascript - SVG doesn't fill once the animation is over -


my name daniel götz , i'm working on portfolio website have problem. svg animation doesn't fill once over.

my website : http://20162.hosts.ma-cloud.nl/portfoliowebsite/

if scroll down h1 called: "mijn skills" can see photoshop logo being animated. want fill once animation over.

is there way can let fill once animation over?

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'); });

include multiple attributes in animation, leave off transition:

start , end of individual property animations can overlap if leave out property want "run through" keyframe:

if property not specified keyframe, or specified invalid, animation of property proceeds if keyframe did not exist.

.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   } }

Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more