Html CSS图像滑块不'；t形滑梯

我正在构建一个包含5个图像的图像滑块，这些图像显示在我的网页顶部。当我在线测试时，第一个图像显示出来。但它不是动画。谁能帮我：）

这是我的HTML：

<div id="slider">
        <figure>
            <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
            <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
        </figure>
</div>

---

为什么图像不向左滑动？我想让它在iOS和Android设备上运行。

您缺少处理效果和转换的整个javascript。我会建议你在像这样的网站上多读一点关于它的内容

---

一般来说，您可以定义HTML和CSS，但也可以定义一些JS（需要javascript才能工作），您可以使用现有框架（一组函数使任务更简单）或手动完成（编写所有需要的代码）

代码是正确的，但是@keyframes并不适用于所有浏览器，所以我添加了-webkit keyframes，它适用于我

@-webkit-keyframes slidy /* Safari and Chrome */
{
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

---

这是一个演示：

这是一个评论，不是回答，非常感谢！！你是我的英雄

@-webkit-keyframes slidy /* Safari and Chrome */
{
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}