[SOLUCIONADO] Problema con el prefijo comercial de OPERA ANIMATION en Javascript

[berkeleyPunk]

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:

/*                   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:

function 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)
    }
 

Código HTML:

<div class="caja" onmouseover="animar(this)">    </div>
 

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:

objeto.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

[berkeleyPunk]

Ya solucioné mi problema.

Resultó que tenía instalada una versión antiquísima de Opera: la 12.x.

Googleé un poco y me enteré que Opera ha tenido muchos problemas para interpretar Javascript.

Lo extraño de todo esto es que hace unas semanas actualicé mi Opera. Imaginaba que se había actualizado a la versión más moderna, pero no fue así.

Por esto de plano lo desinstalé y bajé e instalé la versión 18.x.

Ahora la animación jala perfecto.


Saludos.