Buen día.
La idea es sencilla: que cuando se pase el cursor encima de un
div visualizado en
Opera, se ejecute una animación, y cuando se quite el cursor, se ejecute otra animación.
El código que pondré a continuación lo he probado en
Chrome,
Firefox,
IE11 y ha funcionado perfectamente. Pero no funciona en
Opera 12.16. ¿Por qué?
Código CSS:
Ver original/* animation_1
IDA */
@-o-keyframes animation_1
{
0% {-o-transform:translateX(0%);}
20%, 24%, 100% {-o-transform:translateX(66%);}
22% {-o-transform:translateX(46%);}
55% {-o-transform:translateX(54%);}
}
@keyframes animation_1
{
0% {transform:translateX(0%);}
20%, 24%, 100% {transform:translateX(66%);}
22% {transform:translateX(46%);}
55% {transform:translateX(54%);}
}
/* animation_2
VUELTA */
@-o-keyframes animation_2
{
0% {-o-transform:translateX(66%);}
20%, 24%, 100% {-o-transform:translateX(0%);}
22% {-o-transform:translateX(26%);}
55% {-o-transform:translateX(16%);}
}
@keyframes animation_2
{
0% {transform:translateX(66%);}
20%, 24%, 100% {transform:translateX(0%);}
22% {transform:translateX(26%);}
55% {transform:translateX(16%);}
}
.caja {
position:absolute;
top:100px;
left:-400px;
width:500px;
height:100px;
background-color:green;
}
Código Javascript
:
Ver originalfunction animar(objeto)
{
objeto.addEventListener('mouseover',function()
{
objeto.style.animationName = 'animation_1';
objeto.style.animationDuration = '500ms';
objeto.style.animationFillMode = 'forwards';
objeto.style.animationIterationCount = '1';
objeto.style.animationTimingFunction = 'ease';
},false)
objeto.addEventListener('mouseout',function()
{
objeto.style.animationName = 'animation_2';
objeto.style.animationDuration = '500ms';
objeto.style.animationFillMode = 'forwards';
objeto.style.animationIterationCount = '1';
objeto.style.animationTimingFunction = 'ease';
},false)
}
En el JS que he puesto arriba está declarado el estandar. Y Opera lo jala a medias, hace extraños, y después de un rato, deja de funcionar. Le he puesto el prefijo de Opera así:
Código Javascript
:
Ver originalobjeto.style.OAnimationName = 'animation_1'; // Lo he intentado con la "O" en mayúscula.
objeto.style.oAnimationName = 'animation_1'; // Lo he intentado con la "O" en minúscula.
y de plano no funciona. ¿Qué cambios necesito hacer para que funcione en Opera? Saludos cordiales 
