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