Проблемы с анимацией CSS в Chrome

Question

Я пытаюсь сделать часть моей веб-страницы анимационной, если страница полностью загружена. Анимация отлично работает в Internet Explorer 11, однако она не запускается в версии Chrome (версия 31.0.1650.63 м). Единственный раз, когда анимация действительно работает правильно в 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%; 
    } 
} 

А вот HTML с классом mainpart:

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

Так что, если вы по-прежнему возникают проблемы, он должен быть чем-то еще на вашей странице, не этот код конкретно.