CSS圖像滑塊動畫不起作用

我在這裏是新的，我會盡量簡化我的questin。如果我違反任何規則，我很抱歉。我試圖做一個簡單的css silde圖像。CSS圖像滑塊動畫不起作用

雖然我正在做動畫代碼，但我希望圖片到從我選擇的每個鏈接左側的都會淡出。視頻中說，我正在做所有事情，但它不起作用。

@-webkit-keyframes 'slide'{ 
 
0% {left:-500px;} 
 
100%{left: 0} 
 

 
} 
 

 
ul.slides li:target { 
 
z-index: 100; 
 
-webkit-animation-name: slide; 
 
-webkit-animation-duration:1s; 
 
-webkit-animation-iteration-count:1; 
 
}

<!DOCOTYPE html> 
 
<html> 
 
    <head> 
 
    <title>pure CSS Slider</title> 
 

 
<link rel="stylesheet" href="file:///D:/CSS%20projects/CSS%20slider/style.css"/> 
 

 

 

 
    </head> 
 

 

 
<body> 
 

 
<div id="container"> 
 
\t <h1>pure CSS Slider</h1> 
 
    
 
    <ul class="tumbs"> 
 

 
    <li><a href="#slide-1"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb1.jpg"> 
 
     \t <span>this is image 1</span></a></li> 
 
    <li><a href="#slide-2"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb2.jpg"><span>this is image 2</span></a></li> 
 
    <li><a href="#slide-3"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb3.jpg"><span>this is image 3</span></a></li> 
 
    <li><a href="#slide-4"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb4.jpg"><span>this is image 4</span></a></li> 
 
    <li><a href="#slide-5"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb5.jpg"><span>this is image 5</span></a></li> 
 
    <li><a href="#slide-6"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb6.jpg"><span>this is image 6</span></a></li> 
 
    <li><a href="#slide-7"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb7.jpg"><span>this is image 7</span></a></li> 
 

 

 
    </ul> 
 

 

 
    <ul class="slides"> 
 
<li class="first" id="slide-1"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-1.jpg"> 
 
</li> 
 
<li id="slide-2"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-2.jpg"> 
 
</li> 
 
<li id="slide-3"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-3.jpg"> 
 
</li> 
 
<li id="slide-4"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-4.jpg"> 
 
</li> 
 
<li id="slide-5"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-5.jpg"> 
 
</li> 
 
<li id="slide-6"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-6.jpg"> 
 
</li> 
 
<li id="slide-7"><img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-7.jpg"> 
 
</li> 
 

 
</ul> 
 

 
</div> 
 

 

 
</body> 
 
</html>

來源

2015-04-22 marvelX

嘗試沒有引號：'@ -webkit-關鍵幀slide' – putvande

哎！我試過，但仍無法正常工作：\ – marvelX

您的代碼不起作用，因爲：

left僅適用於被定位以某種方式（relative，absolute，fixed）與position元素。因此，請將其添加到您的li/img CSS中。另外，您也可以使用transform: translateX(-500px);

的jsfiddle - http://jsfiddle.net/njyu7qhk/1/

所以，相關CSS看起來應該是這樣：

@-webkit-keyframes slide { 
    0% { left: -500px; } 
    100% { left: 0; } 
} 

ul.slides li:target { 
    z-index: 100; 
    position: relative; 
    -webkit-animation: slide 1s; 
}

我也是在keyframes名稱中刪除引號。它似乎與他們合作，但我認爲這是'標準'的名稱沒有引號。雖然不完全確定。

祝你好運。

來源

2015-04-23 07:39:04

CSS圖像滑塊動畫不起作用

回答

相關問題