Chrome上的CSS动画问题

我试图使我的网页动画的一部分，一旦网页是完全加载。该动画在InternetExplorer11上运行得非常完美，但在Chrome（31.0.1650.63M版）最新版本上并不运行。动画在Chrome上真正正常运行的唯一时间是，如果我重新加载页面，导航离开选项卡（因此基本上是单击另一个打开的选项卡），等待页面加载，然后在我单击带有动画的选项卡后返回，然后，页面会刷新自身并正确加载动画，但如果我重新加载页面，并且没有导航离开选项卡，只是等待页面加载，动画将不会运行。这看起来很奇怪，我不知道该在代码中查找什么，因为我认为它应该正常工作。有什么线索吗

这是css

.mainpart
{
height:80%;
width:100%;
background-color:#eee;
white-space:nowrap;
z-index:10;
max-height:520px;

-webkit-animation: rotateInRight 4s; /* Safari 4+ */
-moz-animation: rotateInRight 4s; /* Fx 5+ */
-o-animation: rotateInRight 4s; /* Opera 12+ */
animation: rotateInRight 4s; /* IE 10+ */
}
@keyframes rotateInRight {
from {
transform-origin: 100% 0%;
transform: rotateY(-180deg);
}

to {
transform-origin: 100% 0%;
 }
}


@-webkit-keyframes rotateInRight {

from {
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotateY(-180deg);
}

to {
-webkit-transform-origin: 100% 0%;
}
 }

 @-moz-keyframes rotateInUpLeft {
from {
-moz-transform-origin: 100% 0%;
-moz-transform: rotateY(-180deg);
}

to {
-moz-transform-origin: 100% 0%;
}
  }


 @-o-keyframes rotateInUpLeft {
from {
-o-transform-origin: 100% 0%;
-o-transform: rotateY(-180deg);
}

to {
-o-transform-origin: 100% 0%;
  }
}

下面是带有mainpart类的html：

  div class="mainpart" style="overflow: hidden; outline: none; background-color: transparent;" tabindex="5000" > 
 ...........
 </div>

div class=“mainpart”style=“溢出：隐藏；轮廓：无；背景色：透明；“tabindex=“5000”>
...........

这在Firefox、Chrome和IE 10中对我有效

---

我清理了CSS并删除了内联样式。另外，您还缺少一个

嗯。。。是的，由于某些原因，它仍然不起作用，但是，我将整个代码复制并通过整个过程复制到JSFIDLE中，以查看会发生什么，然而，有一个动画正在运行！所以我不知道IE和JSFIDLE为什么或者如何毫无问题地运行动画，但Chrome不能为我做。我将尝试对整个问题采用不同的调试方法。谢谢你的帮助@Morelka我建议将这里的代码复制到一些新文件中，并确保它在所有浏览器中都能正常工作，然后慢慢添加其余的代码（一次一段），看看它何时会崩溃。噢，哇，这是我遇到的一个愚蠢的问题我有一个加载动画之前，所以不是让我的主页加载位和块的时间，我有一个加载动画，使我所有的图像和其他内容加载到浏览器上。一旦所有内容都加载完毕，加载动画将隐藏，然后用户将看到内容。这对我造成的问题是，我设置了动画（我发布的动画，我有问题，不是加载动画）没有在Chrome上运行，但它确实运行。因此，它在加载动画运行时运行，所以我只为动画设置了额外的10秒，现在在Chrome上显示。现在基本上一切都好了。我会把你的答案设置为正确的，因为你已经为我清除了很多步骤，而且你帮了我很大的忙。再次感谢。@Morelka很高兴这有帮助。
<div class="mainpart" tabindex="5000">
    ...........
</div>

.mainpart {
    height: 80%;
    width: 100%;
    background-color: #eee;
    white-space: nowrap;
    z-index: 10;
    max-height: 520px;

    overflow: hidden;
    outline: none;
    background-color: transparent;

    -webkit-animation: rotateInRight 4s; /* Safari 4+ */
       -moz-animation: rotateInRight 4s; /* Fx 5+ */
         -o-animation: rotateInRight 4s; /* Opera 12+ */
            animation: rotateInRight 4s; /* IE 10+ */
}

@keyframes rotateInRight {
    from {
        transform-origin: 100% 0%;
        transform: rotateY(-180deg);
    }
    to {
        transform-origin: 100% 0%;
    }
}
@-webkit-keyframes rotateInRight {
    from {
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: rotateY(-180deg);
    }
    to {
        -webkit-transform-origin: 100% 0%;
    }
}
@-moz-keyframes rotateInUpLeft {
    from {
        -moz-transform-origin: 100% 0%;
        -moz-transform: rotateY(-180deg);
    }
    to {
        -moz-transform-origin: 100% 0%;
    }
}
@-o-keyframes rotateInUpLeft {
    from {
        -o-transform-origin: 100% 0%;
        -o-transform: rotateY(-180deg);
    }
    to {
        -o-transform-origin: 100% 0%;
    }
}