之前分享的一篇文章《用Html5造频谱播放的巅峰视觉盛宴》，我们知道html5可以生成如同flash的动画，可是别忘了html5还有一个搭档css3，如同html5一样，css3也是前沿技术，一样可以做出各式各样的动画，借助渐变的属性我们可以让其从某个状态变为另一个状态，期间的渐变效果就产生了动画，那么css3有哪些动画属性呢？跟随我的脚步，睁大你的眼睛，一起来学习一下吧。

CSS3中和动画有关的属性有三个 transform、transition 和 animation。为了达到各种浏览器的兼容，所以我们定义每个属性都要单独对不同浏览器做相关工作，如:

#baijia{
-webkit-transform: skew(-15deg) rotate(-6deg);//Safari and Chrome浏览器的应用效果
-moz-transform: skew(-15deg) rotate(-6deg);//火狐浏览器的应用效果
-ms-transform: skew(-15deg) rotate(-6deg);//IE浏览器的应用效果
-o-transform: skew(-15deg) rotate(-6deg);//Opera浏览器的应用效果
transform: skew(-15deg) rotate(-6deg);//默认的应用效果
}

1.transform可以理解为变形属性： none 表示不进行变换；如：transform:none; rotate 旋转;如：transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left、top、center、right、bottom或坐标值（50px 70px）。 skew 扭曲；如：transform:skew(30deg,30deg) 释义：skew(相对x轴倾斜,相对y轴倾斜) scale 缩放；如：transform:scale(2,3)横向放大2倍，纵向放大3倍。如等比放大写一个参数即可。 translate 移动；如：transform:translate(50px, 50px); matrix 矩阵变形；基本语法transform: matrix(a, c, b, d, tx, ty);其中a, c, b, d是一个二维矩阵:a:X轴缩放比例 b:Y轴倾斜 c:Y轴缩放比例 d:X轴倾斜；tx, ty就是就是基于X和Y 坐标重新定位元素。其实就是translate （tx,ty） 2.Transition是过渡属性： 1）transition-delay： 过渡变换延迟的时间，单位是s（秒），也就是说如果我们将此属性设为1s(transition-delay：1s),则我们的过渡会延迟一秒进行。 2）transition-property: 执行变换的属性，我们通过此属性在指定我们需要进行过渡的属性，默认是所有属性。如：transition-property:none||all||[ ] 3）transition-duration： 过渡持续的时间，单位是s（秒），如果我们将此属性设为1s(transition-duration：1s)，则过渡会持续1秒钟介绍。 4）transition-timing-function: 变化率，这个主要是指定我们过渡时的速度的变化率。它的值有： ease:此属性是默认值，代表过渡逐渐变慢。 linear:匀速变化。 ease-in:加速变化。 ease-out:减少变化。 ease-in-out:先加速然后在减速 简写与串写举例：a {transition: background 0.5s ease-in,color 0.3s ease-out}或a{transition: all 0.5s ease-in} 3.animation 动画属性 使用这个属性之前我们要先定义一个动画，名字任意取，如： @-webkit-keyframes qiuye{ 0% {margin-left: 100px;background: green;} 40% {margin-left: 150px;background: orange;} 60% {margin-left: 75px;background: blue;} 100% {margin-left: 100px;background: red;} } 这里定义一个名为“qiuye”了四个阶段的样式（0%、40%、60%、100%），接下来就是引用这个动画了： #qiuqiu{ -webkit-animation-name:qiuye;/*动画属性名，也就是我们前面定义的动画名*/ -webkit-animation-duration: 10s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式或者normal*/ }

简写语法：

animation: animation: name duration timing-function delay iteration-count direction fill-mode play-state;;

效果举例：