CSS Animation problems on Chrome - css

Question

I am trying to make a part of my webpage animate once the page is fully loaded. The animation works perfectly on Internet Explorer 11 however it doesn't run on Chrome (version 31.0.1650.63 m) up to date version. The only time the animation actually runs properly on Chrome is if I reload the page, navigate away from the tab (So basically click on another tab that is open), wait for the page to load, then once I click back on the tab with the animation, the page then refreshes itself and loads the animation properly but if I reload the page and do not navigate away from the tab and simply wait for the page to load, the animation doesn't run. This seems really odd I and have no clue what to look for in the code because I assume it should work properly. Any clues??
Here's the 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%;
}
}
And here is the html with the mainpart class:
div class="mainpart" style="overflow: hidden; outline: none; background-color: transparent;" tabindex="5000" >
...........
</div>

Answer 1

This is working for me in Firefox, Chrome, and IE 10.
I cleaned up the CSS and removed the inline styles. Also, you were missing a < in the 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%;
}
}
So, if you still having issues, it must be with something else on your page, not this code specifically.