用CSS写一个简单的幻灯片效果页面

这里是修真院前端小课堂，本篇分析的主题是

【用CSS写一个简单的幻灯片效果页面】

每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【用CSS写一个简单的幻灯片效果页面】

 

1.背景介绍

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。

Animation字面上的意思，就是“动画”的意思，

我们使用CSS3的Animation制作动画，实现简单的幻灯片效果，可以省去复杂的js,jquery代码。Animation有一点不足之处，

我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，大家还是使用flash或js等。

 

2.知识剖析

animation: name duration timing-function delay
iteration-count direction fill-mode play-state;

对应：

animation:marginLeft 10s linear 2s infinite
100 reverse  paused

在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”。<