[SOLUCIONADO] [DUDA] ¿Como hacer efecto "estirado" de un borde?

[mordiskitos]

Hola,

Estoy intentando poner un efecto a un borde. El efecto en concreto es como si se estirase dicho elemento.

Supongamos que tengo este borde:

Código:

div_a {
    border-top: 1px solid blue;
}

El div_a tiene 900px de ancho y yo quiero que cuando aparezca este div, el borde vaya apareciendo desde el centro hacia fuera, como si se expandiese, a ver si alguien me entiende

He tratado de buscar por internet y me he encontrado con tutoriales que explican como aplicar efectos sobre bordes empleando css, pero algo parecido a lo que yo quiero no he sabido encontrarlo...

Un saludo!

[pzin]

No entiendo eso de estirado. Si puedes aclarar eso un poco más, o ser más gráfico...

[mordiskitos]

Iniciado por pzin

No entiendo eso de estirado. Si puedes aclarar eso un poco más, o ser más gráfico...

A ver, es algo que se me ha ocurrido hacer, y se que lo he visto en alguna web, pero no recuerdo donde.

Se trata de que al aparecer el elemento que tiene el borde superior, el borde no aparezca tal cual, sino que vaya apareciendo de dentro a fuera, desde el centro del elemento y vaya creciendo por ambos lados hasta llegar al ancho de ese elemento.

Si el elemento tiene 900px de ancho, nada mas representarse se tiene que ver el elemento sin el borde, y que este aparezca midiendo primero 0px, hasta abarcar el ancho total.

Me resulta complicado explicarlo, a ver si asi se entiende un poco mejor y sino buscare otra forma xDD!

Un saludo!

[pzin]

Pues no sé. ¿Con degradado dices?

Si es algo diferente, intenta publicar una imagen.

[doctype]

Me parece que lo que decís no tiene que ver con CSS, sino con jQuery.. el elemento va cambiando su ANCHO de por ejemplo 0 px (sin visibilidad) hasta 900px por ejemplo (con visibilidad).

Ese efecto de jQuery es Animate.

Y no seria un borde, sino un div posicionado absoluto de 2 pixeles de alto por ejemplo, para que parezca un borde.

Saludos!

[mordiskitos]

Una gran idea la del div, voy a probar y os comento.

Gracias!!

[pzin]

Pues algo así te podría servir:

Código CSS:

hr {
  margin: 0 auto;
  height: 2px;
  border: 0;
  background: black;
  animation: crecer 3s ease-in-out infinite;
}
 
@keyframes crecer {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
 

Funcionando: http://codepen.io/pzin/pen/vCFci

Puedes cambiar infinite por forwards si quieres que se anime una sola vez y mantenga los estilos del final de la animación.

[mordiskitos]

Gracias por vuestra ayuda!, al final me lo solucionó la respuesta de pzin.

Marco el tema como solucionado.

Gracias de nuevo compañeros!