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:
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><a href="#">Link1</a>
</li>
<li><a href="#">Link2</a>
</li>
<li><a href="#">Link3</a>
</li>
<li><a href="#">Link4</a>
</li>
<li class="mselected">Link5</li>
<li><a href="#">Link6</a>
</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;
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.