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",我们把他叫做“关键帧”。

下面我们就一起来看看这个“Keyframes”是什么东西。一个动画初始属性和最终属性，

一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，

如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作，

此时我们需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。

3.常见问题

@keyframes规则

兼容性该如何解决

4.解决方案

在CSS3中创建动画，您需要学习@keyframes规则。

Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，

后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，

有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，

如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，

我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，

比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，

我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，

也就是说这个"from"就相当于"0%"而"to"相当于"100%",值得一说的是，

其中"0%"不能像别的属性取值一样把百分比符号省略。

Internet Explorer 11、Firefox以及Opera支持@keyframes规则和animation属性。

5.编码实战

二.主流的浏览器内核

（1）浏览器最重要或者说最核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
（2）浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。
回到我们的主题：四大浏览器内核（目前主流的四大浏览器内核有Trident、Gecko、WebKit和Presto）。下面，我将依次介绍这些内核。
1.Trident/IE内核：该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这也导致了后面的两个后果：一是Trident内核曾经几乎与W3C标准脱节（2005年）二是Trident内核的大量 Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。
Trident内核的常见浏览器有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、2345浏览器、腾讯TT、淘宝浏览器、阿云浏览器（早期版本）、瑞星安全浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器等等
2.Gecko/Firefox内核：Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。事实上，Gecko引擎的由来跟IE不无关系，前面说过IE没有使用W3C的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的 Netscape的一些员工一起创办了Mozilla，以当时的Mosaic内核为基础重新编写内核，于是开发出了Gecko。不过事实上，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。Gecko核心设计的相对成熟，在无法获取源码的情况下，开放程度仅次于IE。由于其本身Open Source。实际上是目前开发程度最好的浏览器。Firefox的扩展能够给浏览者带来完全不同的浏览体验。市面上Gecko内核的浏览器主要分两类，一类是以Mozilla Firefox为代表的，用XUL作为界面描述语言的浏览器：这类浏览器往往继承了Firefox扩展性好的优点，早前的Madfox和Albatross就是这一类型的浏览器。所以，Gecko内核也被称为Firefox内核。
Gecko内核常见的浏览器： Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）等等
3.WebKit内核：Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。2003年，Apple 宣布发布首款他们自主开发的 web 浏览器：Safari。它的呈现引擎叫 WebKit。它是 Linux 中的 web 浏览器 Konqueror 呈现引擎 KHTML 的一个分支，几年后，WebKit 的开源吸引了呈现引擎的开发人员。根据最新的浏览器调查表明，该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨，另外也是因为Safari 3终于推出了Windows版的缘故吧。Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式也使用Webkit作为内核(在脚本理解方面，Chrome使用自己研发的V8引擎)。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。
WebKit内核常见的浏览器：傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，
4.Presto内核：Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。实际上它是一个动态内核，与其它几个内核的最大的区别就在脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度，根据在同等条件下的测试，Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3（Trident内核最慢，不过两者相差没有多大）。由于Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto的发展。

三.完成了幻灯片的制作

<h2>运维方向</h2>
<div class="foot1"></div>
<div class="container box8">
<div class="row">
<li class="col-12 col-md-6 col-lg-4 content1">
<div class="x-border">
<div class="t-border">
<p>iOS工程师</p>
<p>iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属于类Unix的商业操作系统。国内iOS开发起步相对较晚，人才培养机制更是远 远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。国内iOS开发起步相对较晚，人才培养机制更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。</p>
</div>
<div class="intreduce1">
<img src="people.jpg" alt="">
<div>
<span class="neer">Web前端工程师</span><br>
<span class="neer1">Web前端开发工程师，主要职责是 利用（X）HTML / CSS / JavaScript / flash等各种Web技术进行产品的开 </span>
</div>
</div>
<div class="intreduce2">
<div class="dim">
<span class="six">门槛</span>
<img class="seven" src="five.jpg" alt="">
</div>
<div>
<span class="six">难易程度</span>
<img class="seven" src="five.jpg" alt="">
<img class="seven" src="five.jpg" alt="">
</div>
</div>
<div class="intreduce3">
<div class="mid">
<span class="six">成长周期</span
><span class="red">1-3</span
><span>年</span>
</div>
<div>
<span class="six">稀缺程度</span
><span class="red">345</span
><span>家公司需要</span>
</div>
</div>
<div class="intreduce4">
<div class="serve">
<div>
<span class="six">薪资待遇</span>
</div>
</div>
<div class="content5">
<div class="one">
<span class="three">0-1年</span>
<span class="four">5k-10k/月</span>
</div>
<div  class="one">
<span class="three">1-3年</span>
<span class="four">10k-20k/月</span>
</div>
<div class="two">
<span class="three">3-年</span>
<span class="four">20k-50k/月</span>
</div>
</div>
</div>
<div class="intreduce5">
<h3>有<span class="red">286</span>人正在学习</h3>
</div>
<div class="intreduce6">
<p class="six">提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</p>
</div>
</div>
</li>

.x-border{
position: relative;
overflow: hidden;
border:1px solid #999;
margin-top:10px;
margin-bottom:10px;
}
.x-border:hover .t-border{
top: 0;
display:block;
transition:all 0.5s ease;
right: 0;
}
.t-border p{
color:#fff;
text-align:center;
margin-top:20%;

}
.t-border{
width:100%;
height:100%;
background-color:rgba(61,61,61,0.5);
right: -100%;
top: 0;
position: absolute;
}