Compatibilidad para @KeyFrames usando Javascrip (consulta de html5/css3 avanzado) 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:
- 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:
Explicando el codigo:
<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>
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,
.
