SVG animation

Question

SVG animation

Navigation

#1 by (1 votes)

0

So far I have achieved this with the keyframes, is what I want, but now I only have the problem that it accelerates a lot or slows down in the end, the idea is to be constant so that it works as a web loader and a app, I do not know if it's something in the keyframe or any property is missing. thank you very much for the help you give me.

body {
	background-color: #3F82F1;
	width: 100%;
}
#estaciona{
	width:70%;
	height:70%;
}
.cont {
	margin: 0 auto;
	padding-top: 100px;
}
.cont1 {
	margin: 0 auto;
	position: absolute;
	text-align:center;
}
.st2 {
    fill: none;
    stroke: none;
    stroke-width: 29;
    stroke-miterlimit: 10;
    }
.st2, .st3{
    animation-name: dash;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    /* animation-direction: normal; */
    animation-delay: 1s;
}
@keyframes dash{
	0%{
	/*stroke-dasharray:0;*/
	stroke-dashoffset: 5000;
	/*animation-direction:normal;*/
	}
	100%{
    stroke-dasharray: 1560;
    stroke-dashoffset: 30000;
    stroke: #fff;
    /* animation-direction: alternate-reverse; */
    stroke-linecap: round;
    /* animation-iteration-count: infinite; */
	}
}

<div class="cont">
	
	<div class="cont1">
		<svg version="1.1"
	 id="estaciona" image-rendering="optimizeQuality" text-rendering="geometricPrecision" shape-rendering="geometricPrecision"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 483 552"
	 style="enable-background:new 0 0 483 552;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#fff; stroke:none;}/*fondo circulo E*/
	.st1{fill:#3F82F1;} /*letra E*/
	.st2{fill:none;stroke:none;stroke-width:29;stroke-miterlimit:10;} /*Linea superior*/
	.st3{fill:#FFFFFF;stroke:none;}/*punta redonda*/
</style>
<g>
	<path class="st0" d="M240.6,89.3c-76,0-137.6,61.6-137.6,137.6s61.6,137.6,137.6,137.6s137.6-61.6,137.6-137.6
		S316.6,89.3,240.6,89.3z"/>
	<polygon class="st1" points="294.1,140.8 294.1,170 224.6,170 224.6,211 294.1,211 294.1,240 224.6,240 224.6,280.7 294.1,280.7 
		294.1,309.8 187.9,309.8 187.9,140.8 	"/>
</g>
<g>
	<g>
		<path class="st2" d="M375.3,370.6C497.5,262.5,423.2,36.8,248,36.8C46.3,36.8,0,257.3,94.6,357.1
			c84.8,89.5,160.6,162.1,160.6,162.1"/>
		<g>
			<!--<path class="st3" d="M384.8,381c-6,5-15,4.2-20-1.9s-4.2-15,1.9-20c6-5,15-4.2,20,1.9C391.7,367.1,390.9,376,384.8,381z"/>-->
		</g>
	</g>
</g>
</svg>

	</div>




</div>

javascript html css svg

asked by Alexcertz 14.09.2018 в 18:42

source

1 answer

warning: mail () [function mail]: SMTP server response: 550.5.7.1 [email protected] ... Relaying denied. IP name possibly forged [191 ... 174] in line 100 Valid if a value has already been entered, that does not allow to enter more, jquery?

score 1 · Accepted Answer

I have simplified your code somewhat. I hope you like the result.

The animation is practically the same, I have only added a timer function: animation-timing-function:ease-in; and lasts 5 seconds instead of 8

body {
	background-color: #3F82F1;
}
#estaciona{
	height:100vh;
  display:block;
  margin: 0 auto;
}

.contorno{
  stroke-dasharray: 1323.9, 1323.9;
  stroke-dashoffset:  1323.9;

  animation-name: dash;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function:ease-in;
  animation-delay: 1s;
}
@keyframes dash{
	0%{
	stroke-dashoffset: -1323.9;
	}
	100%{
  stroke-dashoffset: 1323.9;
	}

<svg version="1.1" id="estaciona" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 483 552">
<style type="text/css">
	circle{fill:#fff; stroke:none;}/*fondo circulo E*/
	.E{fill:#3F82F1;} /*letra E*/
	.contorno{fill:none;stroke-width:29;stroke:white; stroke-width:29; stroke-linecap:round; } /*Linea superior*/
	
</style>

<circle cx="240.6" cy="226.9" r="137.6" />
<polygon class="E" points="294.1,140.8 294.1,170 224.6,170 224.6,211 294.1,211 294.1,240 224.6,240 224.6,280.7 294.1,280.7 294.1,309.8 187.9,309.8 187.9,140.8 	"/>
<path class="contorno" id="gabi"  d="M375.3,370.6A194.028,194.028 0 1 0 94.6,357.1L255,519"/>
     
</svg>

If you wonder how I calculated the value for stroke-dashoffset (1323.9) I used the getTotalLength() method that returns the length of an SVG path.