Sólo IE11 hace extraño con animación CSS

berkeleyPunk · #1 (**permalink**) 15/01/2014, 16:41

Buena tarde.

Tengo un div principal que contiene a su vez otros divs. Cuando se pone el cursor encima sobre el div principal se activa una animación de IDA con ayuda de JS. Y una animación de VUELTA cuando se quita el cursor.

El código que a continuación pondré, funciona perfectamente con Chrome, Firefox y Opera. Pero hace extraños en IE11.

Estos extraños consisten en lo sig. Como decía, el div principal contiene otros divs, por ejemplo A, B y C. Si se pasa el cursor de A a B, o de B a A, o la combinación que se les ocurra, se activa la animación de VUELTA, como si quitáramos el cursor del div principal.

Los divs hijos, todos, están dentro del div principal, así que IE11 no debería ejecutar la animación de VUELTA cuando pasamos de un div hijo a otro hijo, porque todos estos sub-divs están dentro del principal, del cual aún no hemos salido.

El código es un poco largo. Así que para que todo sea más breve, les pongo todo el código de una vez:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
 
 
html, body {width:100%; height:100%;}
 
/*           Animación de IDA         */
 
@-webkit-keyframes animation_1
{
    0%   {-webkit-transform:translateX(0%);}
    20%, 24%, 100%  {-webkit-transform:translateX(66%);}
    22%  {-webkit-transform:translateX(46%);}
    55%  {-webkit-transform:translateX(54%);}
}
 
@-ms-keyframes animation_1
{
    0%   {-ms-transform:translateX(0%);}
    20%, 24%, 100%  {-ms-transform:translateX(66%);}
    22%  {-ms-transform:translateX(46%);}
    55%  {-ms-transform:translateX(54%);}
}
 
 
/*           Animación de VUELTA         */
 
@-webkit-keyframes animation_2
{
    0%   {-webkit-transform:translateX(66%);}
    20%, 24%, 100% {-webkit-transform:translateX(0%);}
    22%  {-webkit-transform:translateX(26%);}
    55%  {-webkit-transform:translateX(16%);}
}
 
@-ms-keyframes animation_2
{
    0%   {-ms-transform:translateX(66%);}
    20%, 24%, 100% {-ms-transform:translateX(0%);}
    22%  {-ms-transform:translateX(26%);}
    55%  {-ms-transform:translateX(16%);}
}
 
 
 
 
 
 
 
.caja_1 {
    position:absolute;
    top:6%;
    left:0%;
    width:16%;
    height:84%;
}
.caja_5 {
    position:absolute;
    top:20%;
    left:-100%;
    width:150%;
    height:20%;
    background-color:rgba(0,51,0,.7);
}
.caja_6 {
    display:block;
    position:relative;
    top:9%;
    margin-right:2%;
    float:right;
    width:30%;
    height:80%;
    background-color:rgba(0,0,0,.5);
}
.caja_7 {
    display:block;
    position:relative;
    top:9%;
    margin-right:2%;
    float:right;
    width:62%;
    height:80%;
    background-color:rgba(0,0,0,.5);
}
</style>
 
<script type="text/javascript">
 
    function animar(objeto)
    {
        objeto.addEventListener('mouseover',function()
        {
            objeto.style.WebkitAnimationName = 'animation_1';
            objeto.style.WebkitAnimationDuration = '500ms';
            objeto.style.WebkitAnimationFillMode = 'forwards';
            objeto.style.WebkitAnimationIterationCount = '1';
            objeto.style.WebkitAnimationTimingFunction = 'ease';
 
            objeto.style.msAnimationName = 'animation_1';
            objeto.style.msAnimationDuration = '500ms';
            objeto.style.msAnimationFillMode = 'forwards';
            objeto.style.msAnimationIterationCount = '1';
            objeto.style.msAnimationTimingFunction = 'ease';
 
        },false)
 
 
 
        objeto.addEventListener('mouseout',function()
        {
            objeto.style.webkitAnimationName = 'animation_2';
            objeto.style.webkitAnimationDuration = '500ms';
            objeto.style.webkitAnimationFillMode = 'forwards';
            objeto.style.webkitAnimationIterationCount = '1';
            objeto.style.webkitAnimationTimingFunction = 'ease';
 
            objeto.style.msAnimationName = 'animation_2';
            objeto.style.msAnimationDuration = '500ms';
            objeto.style.msAnimationFillMode = 'forwards';
            objeto.style.msAnimationIterationCount = '1';
            objeto.style.msAnimationTimingFunction = 'ease';
 
        },false)
    }
 
</script>
 
 
</head>
 
 
 
 
 
<body>
 
  <div class="caja_1">
 
    <div class="caja_5" onmouseover="animar(this)">
      <div class="caja_6">
      </div>
      
      <div class="caja_7">
      </div>
    </div>    
 
  </div>
 
</body>
</html>

Saludos cordiales

ronoel54 · #2 (**permalink**) 20/01/2014, 09:15

No detallare tu codigo puesto que principalemente el inconveniente se presenta con el IE11 esta versión está muy nueva y presenta múltiples bugs, inclusive si pruebas la siguiente página desde dicho navegador Microsoft http://windows.microsoft.com/es-es/internet-explorer/ie-9-worldwide-languages la misma no se puede abrir en EI11... Las aplicaciones que corren bajo java o hacen uso de algún producto de google no renderiza bien en el IE11...

Saludos