@keyframes不適用於幻燈片

似乎無法讓我的圖像滑塊工作，我打算將此作爲我的頁面的標題，但圖像不會滑動。我已經嘗試了Chrome的前綴，但它們沒有改變。@keyframes不適用於幻燈片

<html> 
<head> 
<link rel="stylesheet" href="style.css"> 
</head> 
<div class ="slider"> 
    <figure> 
    <img src="slider-test-image-1.jpg" > 
    <img src="slider-test-image-2.jpg" > 
    </figure> 
</div> 
<body> 
</body> 
<html>

這是CSS

.slider{ 
margin:0 auto; 
padding:0; 
overflow: hidden; 
position:relative; 

} 

.slider figure{ 
margin:0 auto; 
padding: 0; 

width:200%; 
-webkit-animation: 5s slidy infinate; 
position:relative; 
left:0; 

} 
.slider figure img{ 
margin:0 auto; 
padding: 0; 
overflow: hidden; 
float:left; 
width:50%; 

position:relative; 
} 

@-webkit-keyframes slidy{ 
0%{ 
    -webkit-left:0%; 
} 
45%{ 
    -webkit-left:0%; 
} 
50%{ 
    -webkit-left:-100%; 
} 
100%{ 
    -webkit-left:-100%; 
} 

}

來源

2017-03-05 Mike Borman

你只設置@-webkit-keyframes和-webkit-animation。您還必須設置@keyframes和animation（不含-webkit-）。接下來，您不使用left，right,top或bottom CSS屬性的前綴。您還可以將infinite作爲infinate拼寫錯誤。這裏是校正代碼：

.slider { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.slider figure { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    width: 200%; 
 
    animation: 5s slidy infinite; 
 
    -webkit-animation: 5s slidy infinite; 
 
    position: relative; 
 
    left: 0; 
 
} 
 

 
.slider figure img { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    float: left; 
 
    width: 50%; 
 
    position: relative; 
 
} 
 

 
@-webkit-keyframes slidy { 
 
    0% { 
 
    left: 0%; 
 
    } 
 
    45% { 
 
    left: 0%; 
 
    } 
 
    50% { 
 
    left: -100%; 
 
    } 
 
    100% { 
 
    left: -100%; 
 
    } 
 
}

<div class ="slider"> 
 
    <figure> 
 
    <img src="slider-test-image-1.jpg" > 
 
    <img src="slider-test-image-2.jpg" > 
 
    </figure> 
 
</div>

來源

2017-03-05 19:51:00

@keyframes不適用於幻燈片

回答

相關問題