[SOLUCIONADO] Animacion CSS

royalz · #1 (**permalink**) 05/03/2013, 02:56

Como puedo hacer que esta animacion se pare en un punto:

Código:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 2s;
-moz-animation:myfirst 2s; /* Firefox */
-webkit-animation:myfirst 2s; /* Safari and Chrome */
-o-animation:myfirst 2s; /* Opera */
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
100%  {background:yellow; left:0px; top:0px; width:900px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%  {background:red; left:0px; top:0px;}
100%  {background:yellow; left:0px; top:0px; width:900px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
100%  {background:yellow; left:0px; top:0px; width:900px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
100%  {background:yellow; left:0px; top:0px; width:900px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Me gustaria que cuando llegase a 900px, se parara, pero se quedase ahí.

ryugen · #2 (**permalink**) 05/03/2013, 13:24

Debería usar el animation-fill-mode (https://developer.mozilla.org/en-US/...tion-fill-mode), de esta manera estaría reteniendo el valor final de la animación

Puedes aplicarlo de la siguiente manera:

Código CSS:

Ver originaldiv
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 2s forwards;
-moz-animation:myfirst 2s forwards; /* Firefox */
-webkit-animation:myfirst 2s forwards; /* Safari and Chrome */
-o-animation:myfirst 2s forwards; /* Opera */
}

royalz · #3 (**permalink**) 05/03/2013, 14:27

WOW!, eso es!!, como es que aquí no lo explica: http://www.w3schools.com/css3/css3_animations.asp

Para serte sincero conocía esa web, algún articulo buscando como hacer algo me ha llevado ahí pero esta vez no, es genial!!, además hay parte de la documentación en castellano, lástima que no este actualizada, pero algo es algo!!

forwards: The target will retain the computed values set by the last keyframe encountered during execution. PERFECTO!!

Ya que estoy, las animaciones hechas en este slider podrían hacerse con la animaciones de css??: http://themes.rascals.eu/switcher/?theme=eprom

Están muy wapas la verdad, estoy indagando inspeccionando elementos con chrome para ver como lo ha hecho.

Gracias ryugen!

ryugen · #4 (**permalink**) 05/03/2013, 16:11

Suelo no guiarme por los tutoriales y especificaciones publicadas en w3school, principalmente por la siguiente razón: http://w3fools.com/

Al tratarse de una fuente cerrada y propensa a contener errores, prefiero evitarla. Y utilizar fuentes más acertadas, como las nombradas en la página que compartí.

Saludos

royalz · #5 (**permalink**) 06/03/2013, 13:37

Gracias por avisar, me acabas de dejar alucinado la verdad, creia que w3school era un estandar y un referente de hecho en algun web como genbeta he leido cosas muy buenas acerca de esta web. Pero, por experiencia propia muchas cosas con las he encontrado, otras si, pero cuando quiero ir mas alla, ya no me vale.

Pues muchas gracias la verdad!