Hey there, I'm new around here and I've got a question for you all. Please bear with me if I make any mistakes. So, I'm attempting to create a simple CSS slide image.
In my animation code, I want the picture to fade from the left every time I click on a link. I followed the instructions in a video, but it doesn't seem to be working as expected.
@-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;
}<!DOCTYPE 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>