在之前实习的时候玩过一些CSS3的动画效果，感觉还是挺有意思的（除了有点麻烦），分享一些学习经验，也是对自己学习的一个总结。

css3中的主要模块有选择器，框模型，背景，边框（圆角和阴影很常用），文本效果（好像不是很常用），2D/3D转换，动画，多列布局（好像也不常用）等等。在css3的背景中，已经可以设置背景的尺寸了，也可以通过background-origin属性设置背景图片的定位区域。

当我们分别设置了这些值得时候，背景就会出现在不同的位置了。下面我们就可以进入正题了。

2D转换

关于2D转换，顾名思义，转换是在2D平面上进行了，这里主要介绍以下三种常用方法：

translate()  //移动元素
transform: translate(50px,100px);  //把元素在x轴方向移动50px，在y轴方向移动100px；
rotate()   //旋转元素
transform: translate(30deg);  //把元素旋转30度（方向试一试就知道了）
scale()   //改变元素的尺寸
transform: scale(0.5,4);   //把元素的宽改成原来的0.5，高改为原来的4倍

2D转换的方法在实现动画效果的时候是很常用的。

3D转换

rotateX() //将元素围绕其 X 轴以给定的度数进行旋转
rotateY() //将元素围绕其 Y 轴以给定的度数进行旋转

好了，了解了上面的基本方法，我们实现一个简单的动画效果。先看html代码图片下载,图片下载：

<img class="img baby" src="baby.png">
<img class="img ballon" src="ballon.png">

CSS代码：

.img{
    position:absolute;
    left:50px;
}
.baby{
    top:86px;
}

现在页面上应该就是下面这个样子了。

下面我们看一下怎么让这个图片动起来：

@keyframes规则

想要了解css3动画，要先简单介绍一下@keyframes规则，它用于规定动画的过程，在@keyframes中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果(@keyframes浏览器支持)。比如这样：

@keyframes changeBg
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: changeBg 5s;
}

复制代码运行一下就能看到效果了。同时我们还可以这样写：

@keyframes changeBg
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

这样我们就可以多次的改变样式了，同时我们还可以改变多个样式：

@keyframes changeBg
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

刚才我们实际上进行了两部分行为，一部分是定义动画过程，一个是让元素应用动画效果。下面简单再完善一下如何使用动画：

animation:name duration function delay iteration-count direction 
//当给元素定义这个属性的时候，就是要对这个元素使用动画效果了，这个属性包括6个值，分别表示：
动画的名称（对应@keyframes），
动画的执行时间（这个时间代表动画执行的总时间，而不是阶段时间，单位是毫秒），
动画的速度曲线（匀速linear、低速-加快-变慢ease、以低速开始ease-in、以低速结束ease-out、以低速开始和结束ease-in-out），
规定动画开始之前的延迟时间，
规定该动画播放的次数（数字n，或者无限次播放infinite）

掌握了这些之后，我们就可以为我们之前的html添加动画效果了，首先我们定义一下动画过程。

@-webkit-keyframes ballon{
    from{
        -weblit-transform:rotate(-30deg);
        -weblit-transform-origin:center bottom;
    }
    to{
        -weblit-transform:rotate(30deg);
        -weblit-transform-origin:center bottom;
    }
}

动画过程定义好了之后，我们就可以使用了：

.ballon{
    -webkit-animation:ballon 2s linear 0s infinite alternate
}

这样一个简单的气球摆动的动画就完成了，复杂的动画也都是通简单的动画组合而成的。在使用css3写动画的时候，注意要先写出静态的页面，通常的动画效果只是在页面加载完成后执行一次，这种情况下我们需要先完成动画页面的最终样式的布局，在此基础上添加动画效果（因为动画执行完成之后会回到它的默认状态）。

在制作复杂的组合动画，或者单次动画的时候，尽量使用百分比方式定义动画，这样更容易掌控整个动画过程；当动画的行为比较简单且需要重复展示的时候（比如云彩的飘动等），可以使用from...to的方式定义动画。

还有一个小技巧，之前我们介绍过动画开始之前可以设置延迟时间，但是当动画行为过多的时候，延迟时间会变得复杂且难以管理，这时我们可以使用另一种方式，我们首先要计算出页面所有动画执行完成所需要的时间，假设是10s，其中某一个动画在5s的时候才开始执行，我们可以在使用这个动画的时候就规定这个动画的时间为10s，但是在前50%我们什么都不去做，这样就实现了延迟的效果了。