元素从一种样式转变为另一种样式添加效果，列如渐显、渐弱、动画快慢。
CSS3元素过渡
● transition-property属性，用于指定应用过渡效果的CSS属性的名称。
transition-property:none | all | property;| 属性值 | 描述 |
|---|---|
| none | 没有属性会获得过渡效果 |
| all | 所有属性都将获得过渡效果 |
| property | 定义应用过渡效果的CSS属性名称，多个名称之间以逗号分割。 |
这里我们通过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函数：
| 函数 | 描述 |
|---|---|
| matrix() | 定义矩形变换，基于X和Y坐标重新定位元素的位置。 |
| translate() | 移动元素对象，即基于X和Y坐标重新定位元素 |
| scale() | 缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。 |
| rotate() | 旋转元素对象，取值为一个度数值。 |
| skew() | 倾斜元素对象，取值为一个度数值。 |
在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)等常用属性值。
| 属性值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结尾 |
| ease-in-out | 动画以低速开始和结尾 |
| cubic-bezier(n,n,n,n) | 在cubic-bezier函数中自己定义的值，n为从0到1的数值 |
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>声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
