Chrome 上的 CSS 动画问题

Question

我正在尝试在页面完全加载后使我的网页的一部分具有动画效果。该动画在 Internet Explorer 11 上完美运行，但它无法在最新版本的 Chrome(版本 31.0.1650.63 m)上运行。动画在 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>

Answer 1

这适用于 Firefox、Chrome 和 IE 10。

我清理了 CSS 并删除了内联样式。此外，您还缺少一个 <在 HTML 中。

• > http://jsfiddle.net/R4THN/

HTML:

<div class="mainpart" tabindex="5000">
    ...........
</div>

CSS:

.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%;
    }
}

因此，如果您仍然遇到问题，那一定是您页面上的其他内容，而不是这段代码。