Tema: Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 avanzado)
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 05/02/2012, 19:59
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
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 original
  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.