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

因此，如果您仍然遇到问题，则必须在页面上显示其他内容，而不是此代码。

Chrome上的CSS动画问题

1 个答案: