用CSS制作简单的动画

标签：时长   translate   linear   init   ack   顺时针   near   动画   for   

 一.2D转换
   属性：translate()   x,y位置移动
          rotate（）   顺时针旋转角度（单位deg，负数为逆时针）
          scale（）    x，y元素尺寸增加或减少
          skew（）     x，y方向进行拉扯（横拉，竖拉）

1.translate
     通过translate的方法，根据给定的left（x坐标）和top（y坐标位置）让元素从其当前位置移动。
    列如：
       transform：translate（50px，100px）；
    值translate（50px，100px）把元素从左侧向右移动50px，从上端向下移动100px

2.rotate（）
     通过rotate（），元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转给定的角度
    列如：
        transform：rotate（30deg）
        transform：rotate（-45deg）

3.scale（）
     通过scale方法，根据给定的宽度（X轴）和高度（Y轴）参数，元素的尺寸会增加或者减少
    列如：
        transform：scale（2，0.6）
        X轴扩大到2倍，y轴扩大到0.6倍


4.skew（）方法
     通过skew（）方法，根据X轴或者Y轴进行对元素的拉扯
    列如：transform：skew（10deg，20deg）

二.3D转换

rotateX（）围绕X轴进行前后翻转
rotateY（）围绕Y轴进行前后翻转

    列：transform：rotateX（120deg）



CSS3过度
过度是元素从一种样式逐渐改变为另一种样式的效果（动画化）

属性：transition
    列如：
div{
    width:100px;
    height:100px;
    transition: width 2s linear 5s;
}
div：hover{
    width:300px;
    }
    （鼠标悬停在div上，div变为宽度300，动画共2秒钟，动画速度平均，5秒钟开始动画）

CSS3动画（ 动画（@keyframes） ）
步骤：
1.  规定动画的名称

2.  用百分比来规定变化发生的过程（关键词 "from" 和 "to"，等同      于 0% （开始）和 100%（结束））

3.  捆绑到某个选择器

4.  规定动画的时长

     直接设置开始和结束
    列：
     @keyframes myfirst
     {
        from {background: red;}
        to {background: yellow;}
     }


2.animation
     animation属性： 属性：
     animation-name: myfirst;//动画名称
     animation-duration: 5s;//动画执行时间
     animation-timing-function: linear;//动画执行效果
     animation-delay: 2s;//动画推迟时间

    简写：
    animation: myfirst 5s linear 2s infinite alternate;

用CSS制作简单的动画

标签：时长   translate   linear   init   ack   顺时针   near   动画   for   

原文地址：http://www.cnblogs.com/-dooge2/p/6720210.html