svg线条动画

svg线条动画

by cacti xu

HTML

<div id="myobj">
<svg version="1.1" id="squiggle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path class="path" fill="none" stroke="#4AC3ED" stroke-width="2.7998" stroke-linecap="round" stroke-miterlimit="10"...

CSS

.path{
	stroke-dasharray:5000;  
	stroke-dashoffset:5000;
	-webkit-animation:dash 5s linear forwards;
	-ms-animation:dash 5s linear forwards;
	animation:dash 5s linear forwards;
	}
@-webkit-keyframes dash{
	to{
		stroke-dashoffset:0;
	}
}
@-ms-keyframes dash{
	to{
		stroke-dashoffset:0;
	}
}
@keyframes dash{
	to{
		stroke-dashoffset:0;
	}
}