CODEWITHSUNDEEP
cssanimationsvg
HacKaDoN
HacKaDoN

Reputation: 27

In Css svg Animation, I couldnt Animate Á object to follow a Path

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">



	.FollowPath{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;animation:draw 2s forwards infinite;stroke-dasharray:936}
	
	.Cap{fill:#000000;stroke:#000000;stroke-width:1;stroke-miterlimit:10; position: absolute;
  overflow: hidden; }
	.Lift{ z-index: 1;animation:move 2s linear  infinite; offset-path:path('M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06')}
	@keyframes draw{
	from{
	stroke-dashoffset:0;
	}
	to{
	stroke-dashoffset:-936;
	}
	}
	
	@keyframes move{
	from{
	 motion-offset: 0%;
	offset-distance:0%;
	}
	to{
	motion-offset: 100%;
	offset-distance:100%;
	}
	}
</style>

<path class="Cap Lift" d="M566,502.5L469.5,596c-4.3,4.1-10.6,5.2-14,2.4l0,0c-3.4-2.8-2.8-8.6,1.5-12.7l96.5-93.5
	c4.3-4.1,10.6-5.2,14-2.4l0,0C570.9,492.6,570.3,498.3,566,502.5z"/>
<path class="FollowPath" d="M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06"/>


</svg>

I wanna ask what is the problem that It is not working as per Expectation,i.e. aeroplane must follow the path. Altough I tried many different approach but the output was unexpected, please Help.

Upvotes: 1

Views: 44

Answers (1)

enxaneta
enxaneta

Reputation: 33044

Your error is the way you are drawing the Cap Lift. The path should be drawn in the origin of the svg canvas for example like this: <path d="M0,0 L100,0 100,20 0,20z"/>

Also in the css I've commented out position: absolute;, and z-index: 1; - useless in svg

.FollowPath {
  fill: none;
  stroke: #ff0000;
  stroke-width: 4;
  stroke-miterlimit: 10;
  animation: draw 2s forwards infinite;
  stroke-dasharray: 936;
}

.Cap {
  fill: #000000;
  stroke: #000000;
  stroke-width: 1;
  stroke-miterlimit: 10;
  /*position: absolute;
  overflow: hidden;*/
}
.Lift {
  /*z-index: 1;*/
  animation: move 2s linear infinite;
  offset-path: path("M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06");
}
@keyframes draw {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -936;
  }
}

@keyframes move {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

svg{border:1px solid}
<svg viewBox="0 0 1920 1080" >
<path class="Cap Lift"
      d="M0,-10
         L100,-10 100,10 0,10z"/>
<path class="FollowPath" d="M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06" /> 
</svg>

Upvotes: 2

Related Questions