0

hasta ahora he logrado esto con los keyframes, es lo que quiero, pero ahora solo me queda el problema de que se acelera mucho o relentiza al final , la idea es que sea constante para que funcione como loader de una web y una app, no se si es algo en el keyframe o falta alguna propiedad. muchas gracias por la ayuda que me den.

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>

1 respuesta 1

1

He simplificado algo tu código. Espero que te guste el resultado.

La animación es prácticamente la misma, solo le he añadido una función temporizador: animation-timing-function:ease-in; y dura 5 segundos en lugar de 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>

Si te preguntas cómo he calculado el valor para stroke-dashoffset (1323.9) he utilizado el método getTotalLength() que devuelve la longitud de un trazado SVG.

4
  • Wow, mucha gracias chamo!, esta genial, ese era el resultado que estaba buscando., gracias por enseñarme.
    – Alexcertz
    Commented el 17 sept. 2018 a las 0:24
  • una ultima pregunta, si quiero que haga lo mismo, pero una vez llegue al final ambas puntas se devuelva y crezca de regreso pero de derecha a izq. y asi dando a entender como autos que entran y salen. ya que es un logo fiscal de autos.
    – Alexcertz
    Commented el 17 sept. 2018 a las 0:26
  • No entiendo muy bien tu pregunta. Prueba añadir ` animation-direction: alternate;`en el CSS. A lo mejor es esto lo que quieres. Si no lo es, por favor haz otra pregunta con más detalles.
    – enxaneta
    Commented el 17 sept. 2018 a las 15:16
  • 1
    esa era, muchas gracias, ahora animare la E del centro, gracias.
    – Alexcertz
    Commented el 18 sept. 2018 a las 1:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.