CSS3过渡效果

过渡简介

过渡效果一般是通过一些简单的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:white;

border:1px solid green;

}

//鼠标悬停后背景变黑，文字变白

div:hover{

background-color:black;

color:white;

margin-left:50px;

}

transition-property

首先，设置过渡的第一个属性就是指定过渡的属性。同样，你需要指定你要过渡某个元素的两套样式用于用户和页面的交互。那么就使用transition-property属性，详细属性值如下：

none没有指定任何样式

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

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

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

background-color color(颜色)

background-imageonlygradients(渐变)

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

//设置背景和文字颜色采用过渡效果(过渡时间为1S)

div {

    width: 200px;

    height: 200px;

    border: 1px solid green;

    background-color: white;

    transition-property: background-color, color, margin-left;

    //这是指定过渡的属性，也可以只写margin-left

    transition-property: all; //所有的属性都参与过渡 【和上面属性二选一】

    transition-duration: 1s;

}

 

div:hover {

    background-color: black;

    color: white;

    margin-left: 100px;

};

transition-duration

如果单纯设置过渡的样式，还不能够立刻实现效果。必须加上过渡所需的时间，因为默认情况下过渡时间为0。

//设置过渡时间为1秒钟，如果是半秒钟可以设置为.5

stransition-duration:1s;

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)

//恒定速度

transition-timing-function:linear;

以上五种都是设定好的属性值，我们也可以自定义这个缓动。使用cubic-bezier()属性值，里面传递四个参数p0,p1,p2,p3，值在0~1之间。

//自定义缓动transition-timing-function:cubic-bezier(0.25,0.67,0.11,0.55);

    /*transition-timing-function: ease;*/

    /*transition-timing-function: linear;*/

    /*transition-timing-function: ease-in;*/

    /*transition-timing-function: cubic-bezier(0.25, 0.65, 0.88, 0.25);*/

transition-delay

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

//设置延迟效果

transition-delay:0s,1s,0s;

div:hover {

    background-color: black;

    color: white;

    margin-left: 100px;

};

 

transition-delay: 0s, 2s, 0s;// 指color过了2秒后才变白

简写和版本

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

//单独声明

transition:background-color 1s ease 0s,

color 1s ease 0s,

margin-left 1s ease 0s;

属性 过渡时间 过渡效果 延迟时间

//如果每个样式都是统一的，直接使用all

transition:all 1s ease 0s; //所有属性一样值

为了兼容旧版本，需要加上相应的浏览器前缀，

 //兼容完整版

-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;