为什么动画里display为none了 可是就是还站位呢？？？？为什么样式里如果设置了display为none 动画就不起作用了。。。。。
<style type="text/css"> /*设置广告和正文的CSS样式*/
* {
margin:auto;
padding:0;
}
#adv {
background:#eeeeee;
overflow:hidden;
height:200px;
display:block;
width:0;
animation:width_change 10s ease 0.1s 5;
}
#txt {
font-size: 18px;
margin:0px auto;
text-align:center;
display: block;
}
nav {
background:grey;
height:3em;
line-height:3em;
color:white;
text-align:center;
width:100%;
}
@keyframes width_change{
0%{
display:none;
width:0;
}
8%{
display:block;
width:20%;
}
16%{
display:block;
width:60%;
}
30%{
display:block;
width:90%;
}
38%{
display:block;
width:100%;
}
46%{
display:block;
width:100%;
}
54%{
display:block;
width:100%;
}
68%{
display:block;
width:100%;
}
76%{
display:block;
width:90%;
} 84%{
display:block;
width:60%;
} 92%{
display:block;
width:20%;
}
100%{
display:none;
width:0;
}
}
-wibkit-@keyframes width_change{
0%{
display:none;
width:0;
}
8%{
display:block;
width:20%;
}
16%{
display:block;
width:60%;
}
30%{
display:block;
width:90%;
}
38%{
display:block;
width:100%;
}
46%{
display:block;
width:100%;
}
54%{
display:block;
width:100%;
}
68%{
display:block;
width:100%;
}
76%{
display:block;
width:90%;
} 84%{
display:block;
width:60%;
} 92%{
display:block;
width:20%;
}
100%{
display:none;
width:0;
}
}
-o-@keyframes width_change{
0%{
display:none;
width:0;
}
8%{
display:block;
width:20%;
}
16%{
display:block;
width:60%;
}
30%{
display:block;
width:90%;
}
38%{
display:block;
width:100%;
}
46%{
display:block;
width:100%;
}
54%{
display:block;
width:100%;
}
68%{
display:block;
width:100%;
}
76%{
display:block;
width:90%;
} 84%{
display:block;
width:60%;
} 92%{
display:block;
width:20%;
}
100%{
display:none;
width:0;
}
}
-moz-@keyframes width_change{
0%{
display:none;
width:0;
}
8%{
display:block;
width:20%;
}
16%{
display:block;
width:60%;
}
30%{
display:block;
width:90%;
}
38%{
display:block;
width:100%;
}
46%{
display:block;
width:100%;
}
54%{
display:block;
width:100%;
}
68%{
display:block;
width:100%;
}
76%{
display:block;
width:90%;
} 84%{
display:block;
width:60%;
} 92%{
display:block;
width:20%;
}
100%{
display:none;
width:0;
}
}
-ms-@keyframes width_change{
0%{
display:none;
width:0;
}
8%{
display:block;
width:20%;
}
16%{
display:block;
width:60%;
}
30%{
display:block;
width:90%;
}
38%{
display:block;
width:100%;
}
46%{
display:block;
width:100%;
}
54%{
display:block;
width:100%;
}
68%{
display:block;
width:100%;
}
76%{
display:block;
width:90%;
} 84%{
display:block;
width:60%;
} 92%{
display:block;
width:20%;
}
100%{
display:none;
width:0;
}
}
</style>
</head>
<body>
<!--广告和正文的HTML代码-->
<div id="adv">
<div id="txt">
<p>欢迎来到慕课网<p>
<p>大幅广告</p>
</div>
</div>
<nav>慕课网欢迎你</nav>
</body>
