动画

1.1 CSS形变 1.1.1 2D形变 需要用到的属性： transform 缩放 transform.scale(2);  放大两倍 旋转 transform: rotate(45deg); /*顺时针旋转45度*/ 平移 transform: translate(100px,300px);   x轴平移100px，y轴平移300px 扭曲、倾斜 transform: skew(30deg,30deg);  x轴，y轴扭曲30度 矩阵 transform: matrix(1,0,0,1,100,100); matrix() 6个属性的意思的：第一个宽度比例1就是原大小，      第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜      第三个是左右倾斜，数字和第二个一样的意思，      第四个是高度比例1就是原大小，      第五个是X方向的像素位移，X方向就是左右，      第六个是Y方向的像素位移，X方向就是上下 1.1.2 3D形变
1.2 过渡动画 1.2.1 transition 使用
参数
局限性 transition的优点在于简单易用，但是它有几个很大的局限。 （1）transition需要事件触发，所以没法在网页加载时自动发生。 （2）transition是一次性的，不能重复发生，除非一再触发。 （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 （4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 CSS Animation就是为了解决这些问题而提出的。 1.2.2 animation CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。 ainimation实现动画效果主要由两部分组成： 1）通过类似Flash动画中的帧来声明一个动画； 
2）在animation属性中调用关键帧声明的动画。 animation动画属性
CSS3的animation制作动画效果主要包括两部分：1. 用关键帧声明一个动画，2.在animation调用关键帧声明的的动画。 使用：
1.3 关键帧动画 Keyframes 1.3.1 关键帧动画的两种不同写法 @keyframes IDENT {      from {         Properties:Properties value;      }      Percentage {         Properties:Properties value;      }      to {        Properties:Properties value;      }    }   或者全部写成百分比的形式：    @keyframes IDENT {        0% {           Properties:Properties value;        }        Percentage {           Properties:Properties value;        }        100% {           Properties:Properties value;        }
      } 其中IDENT是一个动画名称，你可以随便取，当然语义化一点更好，Percentage是百分比值，我们可以添加许多个这样 的百分比，Properties为css的属性名，比如说left,background等，value就是相对应的属性的属性值。值得一提的是， 我们from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内 核的浏览器，所以我需要在上面的基础上加上-webkit前缀.