这里是修真园的前端小班。每一篇分享文章都从【背景介绍】【知识分析】【常见问题】【解决方案】【编码实践】【扩展思考】【更多讨论】【参考文献】八个方面深度剖析前端知识/技能。本文分享的内容是：【用CSS写一个简单的幻灯片效果页面】一、背景介绍CSS3属性中有三个关于制作动画的东西属性：Transform、Transition、Animation。transform属性将2D或3D转换应用于元素。此属性允许我们旋转、缩放、移动或倾斜元素。Transition是在一个或多个可以用数值表示的CSS属性值发生变化时产生过渡效果。动画字面意思是“动画”。我们使用CSS3Animation制作动画来实现简单的滑动效果，可以省去复杂的js和jquery代码。动画有一个缺点。我们可以使用Animation来制作一些我们想要的动画效果，但是有点粗糙。如果你想做出更好的动画，你还是用flash或者js。2、知识分析动画：名称durationtiming-functiondelayiteration-countdirectionfill-modeplay-state；对应关系：animation:marginLeft10slinear2sinfinite100reversepaused在开始介绍Animation之前，我们需要先了解一个特别的东西，那就是“Keyframes”，我们称他为“关键帧”。让我们来看看这个“关键帧”是什么。动画初始属性和结束属性，动作开始时间和持续动作时间，以及动作的转换率。其实这些值都是中间值。如果我们要控制得更细一些，比如说我想在第一时间段内执行什么动作，第二时间段内执行什么动作。这时候，我们就需要这样一个“关键帧”来控制。那么CSS3Animation就是通过“keyframes”属性来实现的。3.常见问题@keyframesrulecompatibility如何解决4.解决方案要在CSS3中创建动画，你需要学习@keyframesrule。关键帧有自己的语法规则。它的名称以“@keyframes”开头，后面是“动画名称”加上一对花括号“{}”。括号内是一些不同时间段的样式规则。有点像我们css风格的写法。对于“@keyframes”中的一个样式规则由多个百分比组成，比如在“0%”和“100%”之间，我们可以在这个规则中创建多个百分比，我们分别给每个百分比。有动画效果的元素需要添加不同的属性，让元素实现不断变化的效果，比如移动，改变元素颜色、位置、大小、形状等，但是需要注意的是我们可以使用“fromt”和“to”表示一个动画从哪里开始和结束，也就是说，“from”相当于“0%”，“to”相当于“100%”。值得一提的是，其中“0%”不能像其他属性值那样省略百分号。InternetExplorer11、Firefox和Opera支持@keyframes规则和动画属性。5.编码实践6.关于如何使用JQ编写幻灯片效果页面的扩展思考和讨论。7.参考资料参考1：百度参考2：JQ首页7.PPT链接：ppt链接》我们相信每个人都可以成为工程师，从现在开始，找一个指导你入门的师兄，你将不再是学习路上迷茫，这里是技能树。IT修真：http://www.jnshu.com，初学者转行到互联网行业的聚集地。”欢迎加入IT交流群565734203与大家一起讨论交流
