為什么動畫里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>
2016-09-20
雖然你設置了display值為none了，但是盒子占據(jù)的高度值還是200px,你可以用火狐瀏覽器下的查看器查看盒子高度值得變化。解決辦法：在0%和100%時添加height:0;其余的添加height:200px;