css动画

动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数，请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成。

@keyframes创建动画
使用 @keyframes 规则，你可以创建动画。
@keyframes name {
    from|0%{
   css样式
   }
    percent{
   css样式
   }
    to|100%{
   css样式
   }
}
name：动画名称，开发人员自己命名；
percent：为百分比值，可以添加多个百分比值；

animation执行动画
animation: name duration timing-function
delay iteration-count direction;

timing-function值
name    设置动画的名称
duration    设置动画的持续时间
timing-function    设置动画效果的速率 (如下)
delay    设置动画的开始时间(延时执行)
iteration-count    设置动画循环的次数，infinite为无限次数的循环
direction    设置动画播放的方向(如下)
animation-play-state    控制动画的播放状态：running代表播放，而paused代表停止播放

direction
normal    默认值为normal表示向前播放
alternate    动画播放在第偶数次向前播放，第奇数次向反方向播放

CSS雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。

优点
减少图片的字节。
减少网页的http请求，从而大大的提高页面的性能。

原理
通过background-image引入背景图片。
通过background-position把背景图片移动到自己需要的位置

<i class="icon"></i>
.icon {
    display: block;
    background-image: url(xx.png);
    background-position: 0px 0px;
     width: 45px;
    height: 70px;
}