方法：1、使用“图像元素{动画：名称和时间}”语句将滑动动画绑定到图像元素上； 2、使用“@keyframes name{0%{transform:translateX(-sliding distance)}}”语句设置滑动动画让图片逐渐滑入并出现。
本教程的运行环境：windows10系统，CSS3&&HTML5版本，DellG3笔记本。
如何用css使图片滑动
在css中可以利用animation属性和@keyframes规则来实现滑动图片的效果。 只有通过@keyframes规则才能创建动画。
动画属性句型如下：
animation: name duration timing-function delay iteration-count direction;
在：
创建动画的原理就是将一组CSS样式逐渐改变为另一组样式。 您可以在动画过程中多次更改这组 CSS 样式。
以比率或通过关键字“from”和“to”指定发生变化的时间css3图片闪动，它们相当于 0% 和 100%。 0%是动画的开始时间css3图片闪动，100%是动画的结束时间。 为了获得最佳的浏览器支持，您仍然应该定义 0% 和 100% 选择器。
还有一个transform属性，用来设置滑动图片的动作。 变换属性将 2D 或 3D 变换应用于元素。 该属性允许我们旋转、缩放、移动或倾斜元素。
示例如下：
Document
img{
animation:fadenum 5s;
}
@keyframes fadenum{
0%{transform:translateX(-420px);}
}
输出结果：
