HTML5-CSS3-JavaScript(4)

CSS3中 变形与动画相关属性

　　CSS3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出更丰富的外观。

　　借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了Transition动画。Transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画的持续时间，就可保证HTML组件按指定规则播放动画。

　　比Transition动画功能更强大的是Animation动画，Animation动画同样可以与位移、旋转、缩放、倾斜4种几何变换结合，但它可以指定多个关键帧，从而允许定义功能更丰富的自定义动画。

　　1. CSS3提供的变形支持

　　CSS3提供的变形支持可以对HTML组件进行常见的几何变换，包括旋转、缩放、倾斜、位移4中变换，也可以使用变换矩阵进行变形。

　　CSS3为变形支持提供了如下两个属性值。

　　transform : 该属性用于设置变形。该属性支持一个或多个变形函数。CSS3提供了如下变形函数。

　　　　translate(tx [,ty]) : 该函数设置HTML组件横向上移动tx距离，纵向上移动ty距离。其中ty参数可以省略，如果省略ty参数，则ty默认为0，表明纵向上没有位移。

　　　　translateX(tx) , translateY(ty)

　　　　scale(sx, sy) : 该函数设置HTML组件横向上缩放比为sx，纵向上缩放比为sy。sy参数可以省略，如果省略该参数，sy默认等于sx，也就是保持横纵比缩放。

　　　　scaleX(sx) = scale(sx,1) , scaleY(sy) = scale(1,sy)

　　　　rotate(angle) : 该函数设置HTML组件顺时针转过angle角度。

　　　　skew(sx [, sy]) : 该函数设置HTML组件沿着X轴倾斜sx角度，沿着Y轴倾斜sy角度。其中sy参数可以省略，如果省略sy参数，则sy默认为0。

　　　　skewX(sx),skewY(sy)

　　　　matrix(m11,m12,m21,m22,dx,dy) : 这是一个基于矩阵变换的函数。其中前4个参数将组成变形矩阵；dx、dy将负责对坐标系统进行平移。

　　transform-origin : 该属性设置变形的中心点。该属性值应该指定为xCenter yCenter，其中xCenter、yCenter支持如下几种属性值。

　　　　left : 指定旋转中心点位于HTML组件的左边界。该属性值只能指定给xCenter。

　　　　top : 指定旋转中心点位于HTML组件的上边界。该属性值只能指定给yCenter。

　　　　right : 指定旋转中心点位于HTML组件的右边界。该属性值只能给xCenter。

　　　　bottom : 指定旋转中心点位于HTML组件的下边界。该属性值只能给yCenter。

　　　　center : 指定旋转中心点位于HTML组件的中间。如果将xCenter、yCenter都指定为center，则旋转中心点位于HTML元素的中心。

　　　　长度值 : 指定旋转中心点距离左边界、右边界的长度。

　　　　百分比 : 指定旋转中心点位于横向、纵向上的百分比位置。

　　例子：

　　-moz-transform:rotate(30deg);

　　-webkit-transform:rotate(30deg);

　　-o-transform:rotate(30deg);

　　2. CSS3提供的Transition动画

　　CSS3提供了Transition动画支持，Transition动画可以控制HTML组件的某个属性发生改变时会经历一段时间、以平滑渐变的方式发生改变，这就产生了动画效果。

　　Transition动画通过transition属性来指定。transition属性的值包括如下4个部分。

　　transition-property : 指定对HTML元素的哪个CSS属性进行平滑渐变处理。该属性可以指定background-color、width、height各种标准的CSS属性。 all指所有属性都执行transition动画处理。

　　transtion-duration : 指定属性平滑渐变的持续时间。

　　transtion-timing-function : 指定渐变的速度。该部分支持如下几个值。

　　　　ease : 动画开始时较慢，然后速度加快，到达最大速度后再减慢速度。

　　　　linear : 线性速度。动画开始时的速度到结束时的速度保持不变。

　　　　ease-in : 动画开始时速度较慢，然后速度加快。

　　　　ease-out : 动画开始时速度很快，然后速度减慢。

　　　　ease-in-out : 动画开始时速度较慢，然后速度加快，到达最大速度后再减慢速度。

　　　　cubic-bezier(x1,y1,x2,y2) : 通过贝济埃曲线来控制动画的速度。该属性值完全可以代替ease、linear、ease-in、ease-out、ease-in-out等属性值。

　　transition-delay : 指定延迟时间，也就是指定经过多长时间的延迟才会开始执行平滑渐变。

　　例子：

　　-moz-transition : background-color 4s linear;

　　-webkit-tansition : background-color 4s linear;

　　-o-transtion : background-color 4s linear;

　　3. CSS3提供的Animation动画

　　CSS3提供了强大的Tween动画支持 : Animation动画，这种动画允许开发者定义多个关键帧，浏览器将会负责计算，插入关键帧之间的虚拟动画帧。

　　CSS3为Animation动画提供了如下几个属性。

　　animation-name : 指定动画名称。该属性指定一个已有的关键帧定义。

　　animation-duration : 指定动画的持续时间。

　　animation-timing-function : 指定动画的变化速度。

　　animation-delay : 指定动画延迟多长时间才开始执行。

　　animation-iteration-count : 指定动画的循环执行次数。无限次循环 infinite

　　animation : 这是一个复合属性。该属性的格式为 : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count，使用该属性可以同时指定animation-name、animation-duration、animation-timing-function、animation-delay和animation-iteration-count等属性。

　　需要指出的是，目前暂时只有Chrome、Safari浏览器支持该属性，而且使用该属性时还需要在该属性的前面添加-webkit-前缀。

　　上面属性中animation-name的属性值应该是一个关键帧定义，这个关键帧定义满足如下格式：

　　keyframes 关键帧名称 {

　　　　from | to | 百分比 {

　　　　　　属性1 : 属性值1;

　　　　　　属性2 : 属性值2;

　　　　　　属性3 : 属性值3;

　　　　　　...

　　　　}

　　　　...

　　}

　　上面语法格式中，from | to | 百分比用于定义关键帧的位置。其中from代表开始处；to代表动画结束帧；百分比则指定关键帧的出现位置。例如，10%代表关键帧出现在动画进行1/10时间处。一个关键帧定义可以包含多个关键帧。

　　例子 ：

　　/* 定义一个关键帧 */

　　@-webkit-keyframes 'fisheye' {

　　　　/* 定义动画开始处的关键帧 */

　　　　0% {

　　　　　　-webkit-transform : scale(1);

　　　　　　background-color : #eee;

　　　　　　border-radius : 10px;

　　　　}

　　　　/* 定义动画进行40%时的关键帧 */

　　　　40% {

　　　　　　-webkit-transform : scale(1.5);

　　　　　　background-color : #bbb;

　　　　　　border-radius : 10px;

　　　　}

　　　　/* 定义动画进行100%时的关键帧 */

　　　　100% {

　　　　　　-webkit-transform : scale(1);

　　　　　　background-color : #eee;

　　　　　　border-radius : 10px;

　　　　}

　　}

　　div>a:hover {

　　　　/* 指定执行fisheye动画 */

　　　　-webkit-animation-name : 'fisheye';

　　　　/* 指定动画的执行时间 */

　　　　-webkit-animation-duration : 3s;

　　　　/* 指定动画的循环无限次 */

　　　　-webkit-animation-iteration-count : infinite;

　　}