我是新来的，我会尝试简化我的任务。如果我违反任何规则，我很抱歉。我试图做一个简单的css silde 图片。
当我正在制作动画代码时，我希望我选择的每个链接都能从左侧淡出淡出。我按照视频说的做了一切，但它无法正常工作。
@-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">
<h1>pure CSS Slider</h1>
<ul class="tumbs">
<li><a href="#slide-1"><img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb1.jpg">
<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>
答案 0 :(得分：1)
您的代码无效，因为：
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名称中的引号。它似乎与他们合作，但我认为它是标准的＆＃39;在没有引号的情况下命名。虽然不完全确定。