Links not displayed in IE10 when another element has CSS3 animation - css

Question

I am trying to create a header with CSS3 animation and I am encountering a problem. The problem is that the menu links do not show up in IE10 on load. However, the menu items do show up when I randomly move the mouse over the area where the links should have been present.
I searched a lot but cannot find the root-cause. However, I managed to sort of figure out that this happens only in IE10 and that too only when the animation is enabled.
Below, I have included two jsFiddle versions. One is without animation property where the menu is displayed correctly. The other is with animation where the menu doesn't show up.
With Animation | Without Animation
Note:
There are no issues in Chrome 30, FireFox 23, Opera 15 and Safari
5.1.7
The Heading and Sub-heading will have multi-lingual text which would be fetched from Database. Hence I don't want to do this
animation with images. I am also not looking for any JavaScript or
jQuery alternates/work-arounds.
HTML
<header id="header">
<div id="banner" class="banner left">
<div id="first_line">Heading</div>
<div>Sub-heading</div>
</div>
<nav class="menu right">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
<li class="mselected">Link5</li>
<li>Link6
</li>
</ul>
</nav>
</header>
CSS
.left {
float: left;
}
.right {
float: right;
}
#header {
background-color: black;
color: white;
font-size: 15px;
height: 70px;
padding-top: 20px;
overflow: hidden;
}
.banner {
cursor: default;
letter-spacing: 1px;
padding-left: 10px;
-webkit-animation: entry 2s linear 2s 5 alternate;
-moz-animation: entry 2s linear 2s 5 alternate;
animation: entry 2s linear 2s 5 alternate; /* This seems to cause the problem */
}
#-webkit-keyframes entry {
from {
-webkit-transform: scale(0.5) rotateX(0deg);
}
25% {
-webkit-transform: scale(0.625) rotateX(90deg);
}
75% {
-webkit-transform: scale(0.875) rotateX(270deg);
}
to {
-webkit-transform: scale(1) rotateX(360deg);
}
}
#keyframes entry {
from {
transform: scale(0.5) rotateX(0deg);
}
25% {
transform: scale(0.625) rotateX(90deg);
}
75% {
transform: scale(0.875) rotateX(270deg);
}
to {
transform: scale(1) rotateX(360deg);
}
}
#-moz-keyframes entry {
from {
-moz-transform: scale(0.5) rotateX(0deg);
}
25% {
-moz-transform: scale(0.625) rotateX(90deg);
}
75% {
-moz-transform: scale(0.875) rotateX(270deg);
}
to {
-moz-transform: scale(1) rotateX(360deg);
}
}
.menu {
padding-right: 10px;
letter-spacing: 0.5px;
}
#first_line {
font-size: 30px;
line-height: 45px;
}
.menu ul {
margin-top: 45px;
}
.menu li {
list-style: none;
display: inline;
padding: 10px 10px 10px 10px;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-clip: padding-box;
}
.menu li a {
color: white;
}
.menu li:hover {
background-color: white;
}
.menu li:hover a, .menu li a:hover {
color: black;
}
.mselected {
background-color: white;
color: black;
}

Answer 1

It seems like the issue is caused due to the delay set for the animation. If we remove the delay, it works as expected and the links are displayed on page load. Fiddle
animation: entry 2s linear 5 alternate;
Note: This is just a work-around solution. I will update if I manage to find out the reason why it doesn't work with animation delay.