CSS3的过渡属性、变形属性、动画属性

元素从一种样式转变为另一种样式添加效果，列如渐显、渐弱、动画快慢。

CSS3元素过渡

●　transition-property属性，用于指定应用过渡效果的CSS属性的名称。

transition-property:none | all | property;

这里我们通过div标签来了解一下基本使用（当鼠标悬停到div标签时，背景颜色由蓝色变为红色）：

<style type="text/css">
    div.eyujun{
        width: 500px;
        height: 130px;
        background-color: blue;
        font-weight: bold;
        color: #fff;
    }
    div.eyujun:hover{
        background-color: red;
        /*指定通过过渡的CSS属性*/
        -webkit-transition-property:background-color; /*Safari Chrome浏览器兼容*/
        -moz-transition-property:background-color;/*Firefox*/
        -o-transition-property:background-color;/*  Opera*/
    }
</style>
<div class="eyujun">属性改变元素背景</div>

●　transition-duration属性，用于指定义过渡效果花费的事件，默认为0，常用单位是秒（s）或者毫秒（ms）。

transition-duration:time;

结合上一个案例进行修改（当鼠标悬停到div标签时，背景颜色由蓝色变为红色并设置过渡时间）

<style type="text/css">
    div.eyujun{
        width: 500px;
        height: 130px;
        background-color: blue;
        font-weight: bold;
        color: #fff;
    }
    div.eyujun:hover{
        background-color: red;
        /*指定通过过渡的CSS属性*/
        -webkit-transition-property:background-color; /*Safari Chrome浏览器兼容*/
        -moz-transition-property:background-color;/*Firefox*/
        -o-transition-property:background-color;/*  Opera*/
        /*设定过渡时间*/
        -webkit-transition-duration:1s; 
        -moz-transition-duration:1s;
        -o-transition-duration:1s;
    }
</style>
<div class="eyujun">属性改变元素背景并设置过渡时间</div>

CSS3元素变形

CSS3出现后，通过transform属性就可实现变形效果。2012年9月，W3C组织发布了CSS3变形工作草案，这个草案包括了CSS3 2D变形和CSS3 3D变形，其中CSS3 3D变形包括平移、旋转、缩放、倾斜。

在CSS3之前，如果想实心上面的效果，都需要依赖图片、Falsh或者JavaScript才可以完成。可以说CSS3提高了网页开发者的工作效率和页面的执行速度。

●　transform（变形）属性，可以让元素在一个坐标系统中变形。

transform:none | transform-functions;

transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设定变形还能输，可以是一个或者多个变形函数列表。

transform-function函数：

在CSS3中使用transform属性，可以实现的变形效果有平移、缩放、倾斜和旋转，接下来分别进行说明。

●　平移，使用translate()方法能够重新定义元素的坐标，实现平移效果。

transform: translate(x-vlue,y-value);

x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离，如果省略了第二个参数，即取默认值0。当值为负数时，表示反方向移动元素。

translate()方法平移的时候，以元素的中心位置为基点，具体通过案例来体验效果：

<style type="text/css">
    div{
        width: 100px;
        height: 50px;
        background-color: blue;
        border: dashed 1px red;
        color: #fff;
    }
    #div1{
        transform:translate(100px,30px); /*x轴向右移动100px，向下移动30px*/
        /*指定平移属性*/
        -ms-transform:translate(100px,30px); /*IE9浏览器兼容*/
        -webkit-transform:translate(100px,30px)； /*Safari Chrome浏览器兼容*/
        -moz-transform:translate(100px,30px)；/*Firefox*/
        -o-transform:translate(100px,30px);/*  Opera*/
    }
</style>
<div>我是元素原来的位置</div>
<div id="div1">我是平移过后的位置</div>

●　缩放，使用scael()方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。

transform:scale(x-axis,y-axis);

x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素；负数值不会缩小元素，而是反转元素（例如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。

<style type="text/css">
    div{
        width: 100px;
        height: 50px;
        background-color: blue;
        border: dashed 1px red;
        color: #fff;
    }
    #div2{
        margin: 100px;
        transform:scale(2,3); /*高度放大2倍，宽度放大3倍*/
        /*指定平移属性*/
        -ms-transform:scale(2,3); /*IE9浏览器兼容*/
        -webkit-transform:scale(2,3)； /*Safari Chrome浏览器兼容*/
        -moz-transform:scale(2,3)；/*Firefox*/
        -o-transform:scale(2,3);/*  Opera*/
    }
</style>
<div>我是原来的元素</div>
<div id="div2">我是放大后的元素</div>

●　倾斜，使用skew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜角度。

transform: skew(x-angle,y-angle);

参数x-angle和y-angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略第二个参数，则取默认值0。

<style type="text/css">
    div{
        width: 100px;
        height: 50px;
        background-color: blue;
        border: dashed 1px red;
        color: #fff;
    }
    #div3{
        transform:skew(30deg,10deg); /*x轴倾斜30度，y轴倾斜10度*/
        /*指定平移属性*/
        -ms-transform:skew(30deg,10deg); /*IE9浏览器兼容*/
        -webkit-transform:skew(30deg,10deg); /*Safari Chrome浏览器兼容*/
        -moz-transform:skew(30deg,10deg);/*Firefox*/
        -o-transform:skew(30deg,10deg);/*  Opera*/
    }
</style>
<div>我是原来的元素</div>
<div id="div3">我是放大后的元素</div>

CSS3动画效果

在CSS3中使用animation属性可以定义复杂的动画效果。使用动画之前必须定义关键帧，一个关键帧表示动画中的一个状态。

●　animation-name属性，用于定义要应用的动画名称。

animation-name: keyframename | none;

animation-name属性初始值为none，适用于所有块元素和行内元素。keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。

●　animation-duration属性，用于定义整个动画效果完成所需要的时间，以秒或毫秒计。

animation-duration:time;

animation-duration属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。

●　@keyframes规则，用于创建动画。

@keyframes animationname {
    keyframes-selector{ css-styles; }
}

animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
keyframe-select：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同，表示动画的开始，to和100%效果相同表示动画的结束。
css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分割，不能为空。

animation-name属性和animation-duration属性结合使用：

<style type="text/css">
    div{
        width: 100px;
        height: 50px;
        background-color: blue;
        border: dashed 1px red;
        color: #fff;
        position: relative;
        animation-name:myai; /*定义动画名称*/
        animation-duration: 2s; /*定义动画时间*/
        /*SaFari Chrome浏览器兼容*/
        -webkit-animation-name:myai;
        -webkit-animation-duration:2s;
    }
    @keyframes myai{
        from {left: 0px;}
        to {left: 100px;}
    }
    @-webkit-keyframes myai{ /*SaFari Chrome浏览器兼容*/
        from {left: 0px;}
        to {left: 100px;}
    }
</style>
<div>动画元素</div>

●　animation-timing-function属性，用于规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。

animation-timing-function: value;

animating-timing-function包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。

animation-timing-function属性的具体使用方法：

<style type="text/css">
    div{
        width: 100px;
        height: 50px;
        background-color: blue;
        border: dashed 1px red;
        color: #fff;
        position: relative;
        animation-name:myai; /*定义动画名称*/
        animation-duration: 2s; /*定义动画时间*/
        animation-timing-function: linear;
        /*SaFari Chrome浏览器兼容*/
        -webkit-animation-name:myai;
        -webkit-animation-duration:2s;
        -webkit-animation-timing-function: linear;
    }
    @keyframes myai{
        from {left: 0px;}
        to {left: 100px;}
    }
    @-webkit-keyframes myai{ /*SaFari Chrome浏览器兼容*/
        from {left: 0px;}
        to {left: 100px;}
    }
</style>
<div>动画元素</div>

●　animation-delay属性，用于定义执行动画效果之前延时的时间，即规定动画什么时候开始。

animation-delay:time;

参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0.animation-delay属性适用于所有的块元素和行内元素。

<style type="text/css">
    div{
        width: 100px;
        height: 50px;
        background-color: blue;
        border: dashed 1px red;
        color: #fff;
        position: relative;
        animation-name:myai; /*定义动画名称*/
        animation-duration: 2s; /*定义动画时间*/
        animation-timing-function: linear;/*定义动画速度曲线*/
        animation-delay: 2s; /*定义动画延时时间*/
        animation-iteration-count: 3; /*定义动画的播放次数*/
        animation-direction: alternate;/*定义动画播放 的方向*/
        /*SaFari Chrome浏览器兼容*/
        -webkit-animation-name:myai;
        -webkit-animation-duration:2s;
        -webkit-animation-timing-function: linear;
        -webkit- animation-delay: 2s;
        -webkit-animation-iteration-count: 3;
        -webkit-animation-direction: alternate;
    }
    @keyframes myai{
        from {left: 0px;}
        to {left: 100px;}
    }
    @-webkit-keyframes myai{ /*SaFari Chrome浏览器兼容*/
        from {left: 0px;}
        to {left: 100px;}
    }
</style>
<div>动画元素</div>