学习动画（animation）之前我们要先了解一下关键帧（keyframes）。因为动画要使用关键帧这个属性来控制动作延续的时间和变换。
一、关键帧（keyframes）
它具有自己的语法规则，以“@keyframes”开头，后面加上一个表示这个动画的名字，然后再加上一对{},在{}中是一些不同时段的样式规则。下面代码中，name是动画的名称，properties是样式的属性名称，percentage为百分比。
<style>
@keyframes name {
from {
properties: value;
}
to {
properties: value;
}
}
/* or */
@keyframes name {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}
}
</style>
二、动画（animation）
1、animation-name: 动画名称
这个名称就是在关键帧里面设置的name。它的默认值是none。如果animation-name：none时，它没有任何动画。我们也可以给一个元素添加多个动画，用逗号隔开就可。
2、animation-duration：动画指定需要多长时间来完成
用来设置动画要在多长时间内完成，可以是秒(s)也可以是毫秒(ms)默认值为0。
3、animation-timing-function：设置动画将如何完成一个周期
元素根据时间的推进来改变属性值的变换速度，常用的有如下几个：animation-timing-functioin:ease(默认)|linear
4、animation-delay：设置动画在启动前的延迟时间
用来设定元素动画开始时间，单位s,默认值为0。
5、animation-iteration-count：定义动画播放的次数
设置动画播放的次数，后面的值可以接数字，也可以是infinite(无限次循环)。animation-iteration-count:number|infinite
6、animation-direction：是否应该轮流反向播放动画
animation-direction:normal|alternate ，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
7、animation-play-state：动画是否在运行或者已暂停
animation-play-state:running|paused;
8、animation-fill-mode：规定动画结束后状态
animation-fill-mode:forwards|backwards；保持forwards，回到起始backwards.
9、简写：
animation: name duration timing-function delay iteration-count direction fill-mode;
需要注意：
简写里面不包含animation-play-state暂停动画，它一般是和鼠标经过来配合使用的
想要动画走回来，而不是直接跳回来，animation-diraction:alternate;
盒子动画结束后停在结束位置，animation-fill-mode:forwards.
CSS动画属性会触发整个页面的重排，重绘。在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。
示例：热点图
<style>
.map {
position: relative;
}
img {
width: 100%;
height: 100%;
margin: 0 auto;
}
.dotted {
position: absolute;
top: 275px;
right: 545px;
width: 8px;
height: 8px;
border: 1px solid rgb(106, 106, 247) ;
border-radius: 50%;
}
.taipei {
top: 578px;
right: 422px;
}
.guangzhou {
top: 626px;
right: 550px;
}
.dotted div[class^=ripple] {
/* 小波纹在父盒子中水平垂直居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 10px rgb(106, 106, 247);
border-radius: 50%;
animation: ripple 1.2s linear infinite;
}
.ripple2 {
animation-delay: 0.4s !important;
}
.ripple3 {
animation-delay: 0.8s !important;
}
@keyframes ripple {
0% {}
70% {
/* 不要用scale因为它会把阴影也放大
transform: scale(2); */
width: 40px;
height: 40px;
opacity: 0.8;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
<body>
<div id="map">
<img src="img/map.png" alt="">
<div class="dotted">
<div class="ripple1"></div>
<div class="ripple2"></div>
<div class="ripple3"></div>
</div>
<div class="dotted taipei">
<div class="ripple1"></div>
<div class="ripple2"></div>
<div class="ripple3"></div>
</div>
<div class="dotted guangzhou">
<div class="ripple1"></div>
<div class="ripple2"></div>
<div class="ripple3"></div>
</div>
</div>
示例二：简单轮播图
<style>
#box {
position: relative;
width: 500px;
height: 500px;
margin: 100px auto;
overflow: hidden;
}
.items {
position: absolute;
width: 1500px;
left: 0;
animation: move 4s linear infinite;
animation-direction: normal;
}
.item a {
display: block;
}
.items a img {
width: 500px;
height: 500px;
float: left;
}
@keyframes move {
0% {
left: 0px;
}
100% {
left: -1000px;
}
}
</style>
</head>
<body>
<div id="box">
<div class="items">
<a href="http://www.baidu.com"><img src="img/flower_01.jpg" alt=""></a>
<a href="http://www.baidu.com "><img src="img/flower_02.jpg" alt=""></a>
<a href="http://www.baidu.com" ><img src="img/dog.jpg" alt=""></a>
</div>
</div>
</body>
三、浏览器兼容性问题
浏览器器兼容问题有很多常见的有以下几种：
1、不同浏览器的标签默认padding和margin不同，这时可以用到通配符*来进行设置；
2、block属性float后，又有横向的margin情况下，在IE6显示margin比设置的大，我们可以在元素中加入display:inline将其转化成行内属性；
3、设置较小高度标签在IE6，IE7中高度超出自己设置高度。可以给标签加上overflow:hidden或者是设置line-height小于设置的高度；
4、行内属性标签，设置display:block后采用float布局，又有横行margin的情况，IE6里的间距比超过设置的间距，我们可以在display:block后面加上display:inline或者是display:table;
5、几个img标签放在一起的时有些浏览器会有默认的间距，这时我们就可使用float属性为img布局；
6、IE6中左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距，这时右边层也采用浮动 float 并且左边层添加属性 margin-right:-3px;
7、对于上下margin重叠的问题我们可以在margin-top,margin-bottom中选一个进行设置不必要设置两个
8、......
四、优化
我们可以从三个方面来入手前端优化：
1、网络请求方面
对于网络请求方面的优化我们可以合并js文件/合并css文件/使用雪碧图/使用base64表示简单的图片；减小资源体积：gzip压缩/js混淆/css压缩/图片压缩；在url中进行缓存：如DNS缓存 /CDN部署与缓存 /http缓存;使用长cache，减少重定向/首屏优化，不滥用web字体
2、渲染和DOM操作方面
优化网页渲染： css的文件放在头部，js文件放在尾部或者异步、尽量避免內联样式。避免在document上直接进行频繁的DOM操作、对于css中可继承的属性，如font-size，尽量使用继承。HTML的viewport设置，开启GPU渲染加速。
3、数据方面
图片懒加载，使用正常的json数据格式进行交互、部分常用数据的缓存、数据埋点和统计等等。
Yslow是雅虎开发的基于网页性能分析浏览器插件，可以检测出网页的具体性能值，并且有著名的Yslow 23条优化规则
1. 减少HTTP请求次数
尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求，这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。
2. 使用CDN
网站上静态资源即css、js全都使用cdn分发，图片亦然。
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
4. 为文件头指定Expires
Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。 他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：
新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.
5. 使用gzip压缩内容
gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。
6. 把CSS放到顶部
网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。
7. 把JS放到底部
加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载。
8. 避免使用CSS表达式
9. 将CSS和JS放到外部文件中进行缓存文件，但有时候为了减少请求，也会直接写到页面里，需要权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。
11. 精简CSS和JS，进行压缩(grunt,glup)
12. 避免多次跳转
13. 删除重复的JS和CSS。重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。
14. 配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载
15. 可缓存的AJAX
异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存。
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
这是一门大学问，这里可以引申出一堆优化的细节。总之大原则减少DOM数量，就会减少浏览器的解析负担
18. 避免404
比如外链的css或者js文件出现问题返回404时，会破坏浏览器对文件的并行加载。并且浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。
19. 减少Cookie的大小
Cookie里面别塞那么多东西，因为每个请求都得带着他跑
20. 使用无cookie的域
比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
22. 不要在HTML中缩放图片
23. 缩小favicon.ico并缓存