前言

作为一个前端的初学者，现在好像已经在nodejs上越跑越偏，之前一直崇拜的CSS3和HTML5动画，如今也好久没有管。因为之前学了好多知识点，但是没有系统的进行总结，就从这篇文章开始，对一些碎片的知识点做一些小小的总结吧，也算是一种回顾吧，这样自己也不会忘记。

先说CSS3的动画

CSS3关于动画的属性其实也不过就是这么几个，transform、transition、animation，这里简单的说一下每一个的使用方法，就不细说了，网上已经有无数多的例子讲这几个属性。

变换属性

transform：none | transform-function

transform-function 有很多：2D的，3D的

div

{

transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-webkit-transform: rotate(30deg); /* Safari and Chrome */

}

过渡属性

过渡属性很重要，你定义了一个变换，还需要定义过渡时间，才会看到效果

transition：single-transition

div

{

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: 2s;

/* Safari */

-webkit-transition-property:width;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:2s;

}

//简写写法

div

{

transition: width 1s linear 2s;

/* Safari */

-webkit-transition:width 1s linear 2s;

}

动画属性

animation：single-animation

实际上就是自己定义的变换，以百分比来定义的一种变换。

//这里定义一个动画名叫myfirst的动画

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background: red;}

to {background: yellow;}

}

//将动画myfirst添加到div中，并设置动画时间为5s

div

{

animation: myfirst 5s;

-webkit-animation: myfirst 5s; /* Safari and Chrome */

}

雪碧图的实现

所谓雪碧图就是一张图，包含了很多小图，可以通过这些小图实现一个动作，如下是一张雪碧图：

那么我们可以通过CSS的animation来设置背景图片的位置，呈现出一种动态效果

.girl{

background: url('img.png');

width: 160px; //务必设置box的宽度，这样其他不在box中就不会显示

height: 185px;

background-size: 1120px 212px;

-webkit-animation: demo 2s steps(7) infinite; //steps(7)表示设置7步完成动画

}

@-webkit-keyframes demo{

0%{ background-position: 0 0 }

100%{ background-position: -1120px 0} //设置背景图的位置从0 到-1120px

}

大家可以自行保存上面图片，并复制上面代码进行测试，是不是很简单。

有兴趣的可以pull我的代码

https://github.com/daisyHawen/css3-sprite-display.git

展示了两个小小的sprite案例