css3新属性实现图标动画效果

css3利用新加的属性能实现一些高端大气的动画效果，比如css3新加动画属性：transform、transition、animation .而且不用涉及到JS代码，单纯的CSS就可以实现动画功能。

首先讲解下这几个动画属性的作用：

transform2d , transform3d

transform是变形动画，2d类的动画沿着x轴和y轴的变化，3d动画仅x值的变化使得动画在yz所形成的平面内的变化，仅y值的变化使得动画在xz所形成的平面内的变化，仅z值的变化使得动画在xy所形成的平面内的变化，如果是x,y值同时变化，则形成的是在x轴上的变化，如果是x,z值同时变化，则形成的是在y轴上的变化，如果是y,z值同时变化，则形成的是在x轴上的变化，如果是x,y,z的值都变化，则形成的是关于空间中的一点上（0,0,0）做变化。

transition:

一个在执行的过程中声明关键帧的动画，可以一旦元素的属性发生变化就可以形成一个动画，然后transition-property，transition-duration，transition-timing-function，transition-delay来设置动画的属性

animation:

通过@keyframes 来设置关键帧，在没个关键帧中设置在该帧动画中某个元素的一个或几个属性的变化。animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction来设置动画的属性

这些内容做过css动画的人都有一定的理解，已经很熟悉的小伙伴可以略过

下面就来介绍几个简单的动画效果例子。

看看效果图：