第八十二节，CSS3过渡效果

CSS3过渡效果

学习要点：
1.过渡简介
2.transition-property
3.transition-duration
4.transition-timing-function
5.transition-delay
6.简写和版本

本章主要探讨HTML5中CSS3的过渡效果，通过这个功能可以不借 JavaScript来实现简单的用户交互功能。

一．过渡简介

过渡效果一般是通过一些简单的CSS动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked等。CSS3提供了transition属性来实现这个过渡功能，主要属性如下表：

属性说明

transition-property 　　　　指定过渡或动态模拟的CSS属性

transition-duration 　　　　指定完成过渡所需的时间

transition-timing-function 　　　　指定过渡的函数

transition-delay 　　　　　指定过渡开始出现的延迟时间

transition 　　　　　　简写形式，按照上门四个属性值连写

我们先创建一个没有过渡效果的元素，然后通过:hover来触发它。在没有任何过渡效果的触发，会立即生硬的执行触发。

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
}
/*鼠标悬停后样式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

二．transition-property 在元素选择器上,指定元素伪类选择器里要执行过渡的样式属性

首先，设置过渡的第一个属性就是指定过渡的属性。在元素选择器上,指定元素伪类选择器里要执行过渡的样式属性。那么就使用transition-property属性，详细属性值如下表：

属性值说明

none 　　　　　　没有指定任何样式

all 　　　　默认值，指定元素所支持transition-property属性的样式

指定样式　　　　指定支持transition-property的样式

从上面的列表中来看，一般来说，none用于本身有过渡样式从而取消。而all，则是支持所有transition-property样式，还有一种是指定transition-property中的某些样式。那么transition-proerty支持的样式有哪些？如下表所示：

transition-proerty支持的样式有

样式名称　　　　样式类型

background-color 　　　　　　 color(颜色)

background-image 　　　　　　 only gradients(渐变)

background-position 　　　　　　 percentage, length(百分比，长度值)

border-bottom-color 　　　　　　 color

border-bottom-width 　　　　　　 length

border-color 　　　　　　　　 color

border-left-color 　　　　　　 color

border-left-width 　　　　　　　 length

border-right-color 　　　　　　　 color

border-right-width 　　　　　　 length

border-spacing 　　　　　　 length

border-top-color 　　　　　　 color

border-top-width 　　　　 length

border-width 　　　　　　 length

bottom 　　　　　　 length, percentage

color 　　　　　　　　 color

crop 　　　　　　　　　 rectangle

font-size 　　　　　　　　 length, percentage

font-weight 　　　　　　 number

grid-* 　　　　　　　　various

height 　　　　　　　 length, percentage

left 　　　　　　　　 length, percentage

letter-spacing 　　　　　　 length

line-height 　　　　　　 number, length, percentage

margin-bottom 　　　　 length

margin-left 　　　　　　 length

margin-right 　　　　　 length

margin-top 　　　　　 length

max-height 　　　　　 length, percentage

max-width 　　　　　 length, percentage

min-height 　　　　　 length, percentage

min-width 　　　　　 length, percentage

opacity 　　　　　　　 number

outline-color 　　　　　　color

outline-offset 　　　　　 integer

outline-width 　　　　　 length

padding-bottom 　　　　 length

padding-left 　　　　　 length

padding-right 　　　　 length

padding-top length

right 　　　　　　　length, percentage

text-indent 　　　　　 length, percentage

text-shadow 　　　　 shadow

top 　　　　　　　length, percentage

vertical-align 　　　　　 keywords, length, percentage

visibility 　　　　　　　visibility

width 　　　　　　 length, percentage

word-spacing 　　　　 length, percentage

z-index 　　　　　　integer

zoom 　　　　　　 number

在元素选择器上,指定元素伪类选择器里要执行过渡的样式属性

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*设置背景颜色、边框、边距为过渡效果,如果设置all或者不设置默认支持所有样式*/
    transition-property: background-color ,border ,margin-left;
}
/*鼠标悬停后样式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

三．transition-duration 在元素选择器里设置过渡时间
如果单纯设置过渡的样式，还不能够立刻实现效果。必须加上过渡所需的时间，因为默认情况下过渡时间为0。设置过渡时间为1秒钟，如果是半秒钟可以设置为.5s

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*设置背景颜色、边框、边距为过渡效果,如果设置all或者不设置默认支持所有样式*/
    transition-property: background-color ,border ,margin-left;
    /*设置过渡时间*/
    transition-duration: 1s;
}
/*鼠标悬停后样式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

四．transition-timing-function产生缓动效果

当过渡效果运行时，比如产生缓动效果。默认情况下的缓动是：元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢，即ease。也是默认值，其他几种缓动方式如下表所示：

属性值说明

ease 　　　　默认值，元素样式从初始状态过渡到终止状态时速度由

　　　　　　　 快到慢，逐渐变慢。等同于贝塞尔曲线(0.25,0.1,

　　　　　　 0.25, 1.0)

linear 　　元素样式从初始状态过渡到终止状态速度是恒速。等同

　　　　 于贝塞尔曲线(0.0,0.0, 1.0, 1.0)

ease-in 　　元素样式从初始状态过渡到终止状态时，速度越来越

　　　　　　　　 快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,

　　　　　　 1.0, 1.0)

ease-out 　　元素样式从初始状态过渡到终止状态时，速度越来越

　　　　　　　　 慢，呈一种减速状态。等同于贝塞尔曲线(0,0,0.58,

　　　　 1.0)

ease-in-out 　　元素样式从初始状态过渡到终止状态时，先加速，再减

　　　　　　 速。等同于贝塞尔曲线(0.42,0, 0.58, 1.0)

cubic-bezier() 贝塞尔曲线，6个值，比较复杂，忽略

steps(1,end) 　　第一个值是一个数值，表示跳跃几次。第二个值是start或者end，可选值。

表示开始时跳跃，还是结束时跳跃

设置缓动效果

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*设置背景颜色、边框、边距为过渡效果,如果设置all或者不设置默认支持所有样式*/
    transition-property: background-color ,border ,margin-left;
    /*设置过渡时间*/
    transition-duration: 1s;
    /*置缓动效果 */
    transition-timing-function: ease;

}
/*鼠标悬停后样式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

五．transition-delay 过渡延迟
这个属性可以设置一个过渡延迟效果，就是效果在设置的延迟时间后再执行。使用transition-delay属性值。如果有多个样式效果，可以设置多个延迟时间，以空格隔开。设置延迟效果
如：transition-delay: 0s, 1s, 0s;

六．简写和版本

我可以直接使用transition来简写，有两种形式的简写。第一种是，每个样式单独声明；第二种是不去考虑样式，即使用all全部声明。

单独声明

说明：transition:过渡样式过渡时间缓动效果过渡延迟;

transition:background-color 1s ease 0s,color 1s ease 0s,margin-left 1s ease 0s;

如果每个样式都是统一的，直接使用all，不去考虑样式

说明：transition: all(所有样式) 过渡时间缓动效果过渡延迟;

transition: all 1s ease 0s;

为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：

　　　　Opera 　　　　Firefox 　　　　Chrome 　　Safari 　　　IE

支持需带前缀 15 ~ 22 　　　　5~ 15 　　　　　4 ~ 25 　　 3.1 ~ 6 无

支持不带前缀 23+ 　　　　 16+ 　　　　 26+ 　　　 6.1+ 　　　 10.0+

兼容完整版

-webkit-transition:all 1s ease 0s; 
-moz-transition:all 1s ease 0s; 
-o-transition:all 1s ease 0s; 
-ms-transition:all 1s ease 0s; 
transition: all 1s ease 0s;