Foros del Web » Diseño de Sitios web » CSS »

Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 avanzado)

 Estas en el tema de Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 avanzado) en el foro de CSS en Foros del Web. Buenas caballeros! A yer me puse a elaborar una animación desde 0 para la web que estoy desarrollando, bueno, decir que yo utilizo y pruebo ...
  #1 (permalink)  
Antiguo 05/02/2012, 12:38
 
Fecha de Ingreso: enero-2012
Mensajes: 100
Pregunta Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 avanzado)
Buenas caballeros!


Ayer me puse a elaborar una animación desde 0 para la web que estoy desarrollando, bueno, decir que yo utilizo y pruebo siempre bajo Chrome, por eso de que el W3Consortium le tiene como hijo mimado xD

Despues de lidiar con algunos problemas de sintasis para que todo fuera como un reloj suizo, me dispongo a probarlo sobre Firefox (ultima v), Opera (idem), Safari (idem) y Internet Explorer ... (es broma)

El resultado es este:
  1. Firefox: no lee el atributo dashed del borde, con lo que queda un circulo completo y no hay efecto de animación posible.

    Opera: Bueno, opera ..., its diferent xD , lee todo correctamente, pero no ejecuta la animación, ojo, obviamente he puesto el prefijo -o a todos los campos que lo requieren, pero como si nada ..

    Safari:Es el mas optimista de todos, lee todo perfectamente, y todo seria matavilloso si no fuese por que solo ejecuta el "primer plano" de la animación, no ejecuta la aceleración de la rotación(veréis ahora el código), no debería de ser así ya que al igual que chrome , esta basado en Webkit ...

    IE9 : Bueno, nunca me ha gustado criticar a un alumno sin capacidades, así que paso de decir nada de IE9 el pobre ya tiene mucho agonizando por su cada vez menos pero en el mercado.


Codigo

Código: 
@-webkit-keyframes rotation {
	0%	{	-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
	}
	
	100% {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-o-transform: rotate(360deg);
	}
}

@-webkit-keyframes norotation {
	0%	{	-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
	}
	
	100% {
			-webkit-transform: rotate(-360deg);
			-moz-transform: rotate(-360deg);
			-o-transform: rotate(-360deg);
	}
}

	.onbotomB  {
		height:20px;
		width:20px;
		background:url(Imagenes/flechadelante.png) no-repeat center;
		border-radius:15px;	
		margin:1px 1px;
		padding:0px 0px;
		z-index: 1;
		position:absolute;
		-webkit-animation: norotation 1s infinite linear;
		-o-animation: norotation 1s infinite linear;
		animation: norotation 1s infinite linear;

	}
	
	.offbotomB  {
		height:20px;
		width:20px;
		background:url(Imagenes/flechadelante.png) no-repeat center;
		border-radius:15px;	
		margin:1px 1px;
		padding:0px 0px;
		z-index: 1;
		position:absolute;
		-webkit-animation: norotation 3s infinite linear;
		-o-animation: norotation 3s infinite linear;
		animation: norotation 3s infinite linear;

	}
	
	.onbotomA  {
		height:20px;
		width:20px;
		background:url(Imagenes/flechaatras.png) no-repeat center;
		border-radius:15px;	
		margin:1px 1px;
		padding:0px 0px;
		z-index: 1;
		position:absolute;
		-webkit-animation: norotation 1s infinite linear;
		-o-animation: norotation 1s infinite linear;
		animation: norotation 1s infinite linear;

	}
	
	.offbotomA  {
		height:20px;
		width:20px;
		background:url(Imagenes/flechaatras.png) no-repeat center;
		border-radius:15px;	
		margin:1px 1px;
		padding:0px 0px;
		z-index: 1;
		position:absolute;
		-webkit-animation: norotation 3s infinite linear;
		-o-animation: norotation 3s infinite linear;
		animation: norotation 3s infinite linear;

	}

	
	.onbotomAA {	
		
		height:22px;
		width:22px;
		border:2px dashed hsla(0,0%,60%,0.8);
		border-radius:12px;
		margin:0px 0px;
		padding:0px 0px;
		z-index: 2;
		position:absolute;
		-webkit-animation: rotation 1s infinite linear;
		-o-animation: rotation 1s infinite linear;
		animation: rotation 1s infinite linear;
	}
	
	.offbotomAA {
		height:22px;
		width:22px;
		border:2px dashed hsla(0,0%,60%,0.5);
		border-radius:12px;
		margin:0px 0px;
		padding:0px 0px;
		z-index: 2;
		position:absolute;
		-webkit-animation: rotation 3s infinite linear;
		-o-animation: rotation 3s infinite linear;
		animation: rotation 3s infinite linear;
		
	}
	
	.offbotomBB {
		height:22px;
		width:22px;
		border:2px dashed hsla(0,0%,60%,0.5);
		border-radius:12px;
		margin:0px 0px;
		padding:0px 0px;
		z-index: 2;
		position:absolute;
		-webkit-animation: rotation 3s infinite linear;
		-o-animation: rotation 3s infinite linear;
		animation: norotation 3s infinite linear;
		
	}
	
	
	.onbotomBB {
		height:22px;
		width:22px;
		border:2px dashed hsla(0,0%,60%,0.8);
		border-radius:12px;
		margin:0px 0px;
		padding:0px 0px;
		z-index: 2;
		position:absolute;
		-webkit-animation: rotation 1s infinite linear;
		-o-animation: rotation 1s infinite linear;
		animation: rotation 1s infinite linear;
		
	}

En el body :


Código: 
<div class="offbotomAA" onmouseover="this.className='onbotomAA'" onmouseout="this.className='offbotomAA'">
                    		<div class="offbotomA" onmouseover="this.className='onbotomA'" onmouseout="this.className='offbotomA'"></div>
                    		</div>
                      </div>
                            
                   		<div id="botomBBB" class="floatrigth">
                       		<div  class="offbotomBB" onmouseover="this.className='onbotomBB'" onmouseout="this.className='offbotomBB'">
                    			<div class="offbotomB" onmouseover="this.className='onbotomB'" onmouseout="this.className='offbotomB'"></div>
                    		</div>
Explicando el codigo:

Bueno, tenemos dos divs , el primero AA sobre el segundo A , En realidad seria BB sobre B izquierda y AA sobre A derecha, Partiendo de aqui, tenemos que en div con mayor z-index (AA) tiene un atributo de altura y ancho cuadrados, exactamente algo como width:22px y heigth:22px

Este tiene un border radius alto que lo hace redondo, y al borde le aplicamos un dashed para que sea intermitente, con una anchura de borde de 2px.

Esta parte del div tiene que rotar siempre a una velocidad de 0%(0deg) a 100%(360deg) es decir una vuelta completa, en 3s , esta es la @Keyframes rotation

Ahora hablaremos del Div secundario(A), el que esta enbebido sobre (AA) , es igualmente un cuadrado, ligeramente mas pequeño, exactamente width:20px y height:20px, este tiene como fondo un background:url, una imagen , en concreto una imagen png de un triagualo, como el del play, exactamente como el de un botom play para ser exactos.

Bien esta parte tendrá que estar siempre quiera, pero al estar embebida dentro del anteror div, va a rotar, asi que hacemos una compensacion del 100% hacia el lado contrario para que no rote, es decir de 0%(0deg) a 100% (-360deg)


Esto serian las clases mouseOut del mouseover, las clases mouseon tendrian que acelerar la rotacion del borde dashed, sin que el div embebido gire, es decir acelerar el dashed del primer div mientras el segundo sigue igual de quiero, esto no es muy ficil, como podéis ver es solo modificar los tiempos de la animacion.


Resumen : onmouseout = rotacion a velocidad normal
onmouseover=se acelera la rotacion,
Última edición por Albuss; 05/02/2012 a las 13:29
  #2 (permalink)  
Antiguo 05/02/2012, 18:09
 
Fecha de Ingreso: enero-2012
Mensajes: 100
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Ya que nadie contesta, aclaro que lo que busco es que las animaciones @keyframes y los onmouseover y onmouseout sean leidos por estos tres navegadores : Opera, Safari y Firefox, partiendo de que en Chrome va todo al 100%.

Ovbiamente el problema reside (ver el código) en que ya he aputalado todos los prefijos posibles para cada navegador, vease -o / -webkit y -moz
  #3 (permalink)  
Antiguo 05/02/2012, 18:50
Avatar de webosiris
Moderador egiptólogo
  
Fecha de Ingreso: noviembre-2002
Ubicación: Luxor, Egipto
Mensajes: 9.496
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
http://www.w3schools.com/cssref/css3_pr_keyframes.asp

- si miras, en tu código está solo el -webkit... lógico que funcione solo en chrome/safari. Para firefox necesitas @-moz-keyframes
- opera e IE no soportan keyframes (edito: IE lo soporta a partir de IE10, con el prefijo -ms)
- más que avanzado, es un código altamente experimental... está bien para probar, pero si quieres usarlo en una web real, yo me iría en todo caso por animaciones javascript

Por cierto, lo muevo a css, que esto es CSS3 pero no tiene nada que ver con HTML5
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
Última edición por webosiris; 05/02/2012 a las 20:12
  #4 (permalink)  
Antiguo 05/02/2012, 18:59
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: Castelar
Mensajes: 4.702
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
A lo que te señalo WebOsiris te agrego
tenes unos divs mal anidados, el uso de javascript es innecesario disponiendo de la pseudoclase hover. Lo del border dashed (y dotted), es un viejo bug de firefox, n lo probé , pero podés intentar con border-image.

Ejemplo (le agregué un outline para poder apreciarlo más en Firefox)

Código HTML: 
Ver originalCopiar
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>titulo</title> 
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9.  
  10. @-webkit-keyframes rotation {
  11.     0%  {   -webkit-transform: rotate(0deg);
  12.  
  13.     }
  14.     
  15.     100% {
  16.             -webkit-transform: rotate(360deg);
  17.  
  18.     }
  19. }
  20.  
  21. @-webkit-keyframes norotation {
  22.     0%  {   -webkit-transform: rotate(0deg);
  23.  
  24.     }
  25.     
  26.     100% {
  27.             -webkit-transform: rotate(-360deg);
  28.  
  29.     }
  30. }
  31.  
  32.  
  33. @-moz-keyframes rotation {
  34.     0%  {   -moz-transform: rotate(0deg);
  35.     }
  36.     
  37.     100% {
  38.             -moz-transform: rotate(360deg);
  39.  
  40.     }
  41. }
  42.  
  43. @-moz-keyframes norotation {
  44.     0%  {   -moz-transform: rotate(0deg);
  45.  
  46.     }
  47.     
  48.     100% {
  49.             -moz-transform: rotate(-360deg);
  50.  
  51.     }
  52. }
  53.  
  54.  
  55.  
  56.  
  57. @-o-keyframes rotation {
  58.     0%  {   -o-transform: rotate(0deg);
  59.  
  60.     }
  61.     
  62.     100% {
  63.  
  64.             -o-transform: rotate(360deg);
  65.     }
  66. }
  67.  
  68. @-o-keyframes norotation {
  69.     0%  {   
  70.             -o-transform: rotate(0deg);
  71.     }
  72.     
  73.     100% {
  74.  
  75.             -o-transform: rotate(-360deg);
  76.     }
  77. }
  78.  
  79.  
  80.  
  81.     .offbotomB:hover  {
  82.         -webkit-animation: norotation 1s infinite linear;
  83.         -o-animation: norotation 1s infinite linear;
  84.         -moz-animation: norotation 1s infinite linear;
  85.  
  86.     }
  87.     
  88.     .offbotomB  {
  89.         height:20px;
  90.         width:20px;
  91.         background:url(Imagenes/flechadelante.png) no-repeat center;
  92.         border-radius:15px; 
  93.         margin:1px 1px;
  94.         padding:0px 0px;
  95.         z-index: 1;
  96.         position:absolute;
  97.         -webkit-animation: norotation 3s infinite linear;
  98.         -o-animation: norotation 3s infinite linear;
  99.         -moz-animation: norotation 3s infinite linear;
  100.  
  101.     }
  102.     
  103.     .offbotomA:hover  {
  104.         -webkit-animation: norotation 1s infinite linear;
  105.         -o-animation: norotation 1s infinite linear;
  106.         -moz-animation: norotation 1s infinite linear;
  107.  
  108.     }
  109.     
  110.     .offbotomA  {
  111.         height:20px;
  112.         width:20px;
  113.         background:url(Imagenes/flechaatras.png) no-repeat center;
  114.         border-radius:15px; 
  115.         margin:1px 1px;
  116.         padding:0px 0px;
  117.         z-index: 1;
  118.         position:absolute;
  119.         -webkit-animation: norotation 3s infinite linear;
  120.         -o-animation: norotation 3s infinite linear;
  121.         -moz-animation: norotation 3s infinite linear;
  122.  
  123.     }
  124.  
  125.     
  126.     .offbotomAA:hover { 
  127.         -webkit-animation: rotation 1s infinite linear;
  128.         -o-animation: rotation 1s infinite linear;
  129.         -moz-animation: rotation 1s infinite linear;
  130.     }
  131.     
  132.     .offbotomAA {
  133.         height:22px;
  134.         width:22px;
  135.         border:1px dotted red;
  136.         outline:green dotted thin;
  137.         border-radius:12px;
  138.         margin:0px 0px;
  139.         padding:0px 0px;
  140.         z-index: 2;
  141.         position:absolute;
  142.         -webkit-animation: rotation 3s infinite linear;
  143.         -o-animation: rotation 3s infinite linear;
  144.         -moz-animation: rotation 3s infinite linear;
  145.         
  146.     }
  147.     
  148.     .offbotomBB {
  149.         height:22px;
  150.         width:22px;
  151.         border:1px dotted red;
  152.         outline:green dotted thin;
  153.         border-radius:12px;
  154.         margin:0px 0px;
  155.         padding:0px 0px;
  156.         z-index: 2;
  157.         position:absolute;
  158.         -webkit-animation: rotation 3s infinite linear;
  159.         -o-animation: rotation 3s infinite linear;
  160.         -moz-animation: norotation 3s infinite linear;
  161.         
  162.     }
  163.     
  164.     .offbotomBB:hover {
  165.  
  166.         -webkit-animation: rotation 1s infinite linear;
  167.         -o-animation: rotation 1s infinite linear;
  168.         -moz-animation: rotation 1s infinite linear;
  169.     }
  170.  
  171. /*]]>*/
  172. </style>
  173. </head>
  174. <body>
  175. <div class="offbotomAA">
  176. <div class="offbotomA"></div>
  177. </div>
  178. <div id="botomBBB" class="floatrigth">
  179. <div class="offbotomBB">
  180. <div class="offbotomB"></div>
  181. </div>
  182. </div>
  183. </body>
  184. </html>

Saludos
PD, tendráis que tener un poco más de paciencia al esperar respuestas, sobre todo pensando que hoy es domingo
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 05/02/2012, 19:21
 
Fecha de Ingreso: enero-2012
Mensajes: 100
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
@emprear Te agradezco tu reiteracion en usar :hover, pero por experiencia propia, falla mucho y da muchos problemas al emplearlo dinamicamente, he mirado tu código con mucho interés y voy a testearlo y te cuento que tal va!
  #6 (permalink)  
Antiguo 05/02/2012, 19:26
 
Fecha de Ingreso: enero-2012
Mensajes: 100
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Cita:
Iniciado por webosiris Ver Mensaje
[URL]http://www.w3schools.com/cssref/css3_pr_keyframes.asp[/URL]

- si miras, en tu código está solo el -webkit... lógico que funcione solo en chrome/safari. Para firefox necesitas @-moz-keyframes
- opera e IE no soportan keyframes
- más que avanzado, es un código altamente experimental... está bien para probar, pero si quieres usarlo en una web real, yo me iría en todo caso por animaciones javascript

Por cierto, lo muevo a css, que esto es CSS3 pero no tiene nada que ver con HTML5

El problema con Safari es que no ejecuta la animacion en el estado onmouseover, voy a tratar con la pseudoclase :hover, aunque reitero que me ha dado muchos problemas , sobretodo con Chrome


Os. @emprear , el border image en un cuadrado tan pequeño para hacer un efecto de border dashed, ¿no es un poco matar una mosca de un cañonazo?, sigo, ya que estoy tratando de meter las menos imágenes posibles, hasta el trigunlo lo voy a sustituir por código.
Última edición por Albuss; 05/02/2012 a las 19:33
  #7 (permalink)  
Antiguo 05/02/2012, 19:35
 
Fecha de Ingreso: enero-2012
Mensajes: 100
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Quizás la respuesta al border dashed sea esta :

body {

-moz-outline-style: none;
}


Voy a probar y os confirmo!
  #8 (permalink)  
Antiguo 05/02/2012, 19:54
 
Fecha de Ingreso: enero-2012
Mensajes: 100
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Bueno, he estado probando, y los tanto los @-moz-keyframes como @-o-keyframes, no van.

No los reconoce y no los lee. .... Estamos en el punto inicial :(


Ps. lo peor de todo es que los de mozzila dicen que va con @keyframes , https://developer.mozilla.org/en/CSS/@keyframes , Lo he probado y nada :(
  #9 (permalink)  
Antiguo 05/02/2012, 20:10
Avatar de webosiris
Moderador egiptólogo
  
Fecha de Ingreso: noviembre-2002
Ubicación: Luxor, Egipto
Mensajes: 9.496
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Cita:
No los reconoce y no los lee. .... Estamos en el punto inicial :(
algo estás haciendo mal, porque probé el código de emprear y funciona lo más bien.

Cita:
@-o-keyframes, no van.
eso no existe, ya te dije antes, es imposible hacerlo funcionar en opera ya que no ofrece ningún tipo de soporte.

Cita:
Ps. lo peor de todo es que los de mozzila dicen que va con @keyframes
no no dice eso, lee la tabla al final, pone que funciona con el prefijo -moz a partir de la versión 5 de firefox.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #10 (permalink)  
Antiguo 05/02/2012, 20:27
 
Fecha de Ingreso: enero-2012
Mensajes: 100
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Gracias por el soporte que estais dando, de todas formas me inquieta que en un navegador tan popular (el que tiene mas cuota de mercado) no se pueda hacer dashed al border radius. Al final optare por hacerlo con una imagen y no con código, de todas maneras en IE9 no va nada , y en Safari tanto el evento html onmouseover como la pseudoclase:hover no van, no hace la segunda animación. Me jode por que es el 4ºnavegador con mas cuota de mercado


Ps. @webosiris , si fallo mio, es el DreamweaverCS5.5 el que no "lee" los @-moz-keyframes.
  #11 (permalink)  
Antiguo 05/02/2012, 20:46
Avatar de webosiris
Moderador egiptólogo
  
Fecha de Ingreso: noviembre-2002
Ubicación: Luxor, Egipto
Mensajes: 9.496
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Cita:
Iniciado por Albuss Ver Mensaje
Gracias por el soporte que estais dando, de todas formas me inquieta que en un navegador tan popular (el que tiene mas cuota de mercado) no se pueda hacer dashed al border radius.
es un bug que por lo que veo viene desde el inicio mismo de firefox, y hasta ahora no han solucionado.Está en bugzilla como Bug 382721 (reportado en el 2007) pero hay bugs aún más viejos que hacen mención a esto .

Cita:
Me jode por que es el 4ºnavegador con mas cuota de mercado
francamente si te importa la cuota de mercado... no uses código experimental
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #12 (permalink)  
Antiguo 05/02/2012, 21:36
 
Fecha de Ingreso: enero-2012
Mensajes: 100
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Francamente, el código experimental, (este) lleva como varios años pululando, es el futuro, y consume menos recursos. Por que después de todo el Javascrip sobretodo para hacer animaciones no es precisamente liviano .... El futuro son los Eventos de HTML + CSS para eso esta evolucionando tanto ambas ramas , ¿O NO?
  #13 (permalink)  
Antiguo 05/02/2012, 22:52
Avatar de webosiris
Moderador egiptólogo
  
Fecha de Ingreso: noviembre-2002
Ubicación: Luxor, Egipto
Mensajes: 9.496
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Cita:
Por que después de todo el Javascrip sobretodo para hacer animaciones no es precisamente liviano
pues depende, con jquery puedes hacer maravillas con muy poco código, para animaciones ahí tienes a animate() por ejemplo.

Cita:
El futuro son los Eventos de HTML + CSS para eso esta evolucionando tanto ambas ramas , ¿O NO?
si, por supuesto... pero son el FUTURO, por lo tanto no te amargues tanto que no funcionen en el PRESENTE.

Cita:
Javascrip
te falta una t. Es JavaScript
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #14 (permalink)  
Antiguo 05/02/2012, 23:19
 
Fecha de Ingreso: enero-2012
Mensajes: 100
Respuesta: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 av
Bueno, después de todo he sacado en claro muchas cosas, gracias por el aporte que me habéis dado!

Etiquetas: css3, html5, javascript
Respuesta

¿Nuevo en el foro? Regístrate

« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:06.
SEO by vBSEO 3.3.2