首先介绍一下transition的属性取值：

transition-property : 主要设置对象中的参与过渡的属性，包括（border-color,background-color,color）

transition-duration : 主要设置对象过渡的持续时间

transition-timing-function : 主要设置对象过渡的动画类型

transition-delay : 主要设置对象延迟过渡的时间

理解了这几个属性，过渡就基本掌握了，一般我把它经常运用到制作导航菜单的属性中去！

现在来细细理解这几个的意思！

比如：

　　

.test{

　　transition : border-color .5s ease-in .1s,

　　　　　　　　background-color .5s ease-in .1s,

　　　　　　　　color .5s ease-in .1s;

　　}

是什么意思？我们来把它拆分看看：

transition-property:border-color, background-color, color;//参与过渡的属性

transition-duration:.5s, .5s, .5s;//对象过渡持续的时间

transition-timing-function:ease-in, ease-in, ease-in;//对象过渡的动画类型

transition-delay:.1s, .1s, .1s;//对象延迟过渡的时间
注意：如果其他属性一样的话，我们可以用同一个参数来表示就可以了，就比如除了transiton-propperty之外的三个就可以写一个值就可以了，如下：
transition-property:border-color, background-color, color;

transition-duration:.5s;

transition-timing-function:ease-in;

transition-delay:.1s;
注意：如果比如transition-property的所有属性都需要的话，而其他属性参数都一样的话，可以这样表示：

transition : all .5s ease-in .1s;
拆分就是这样：
transition-property:all;

transition-duration:.5s;

transition-timing-function:ease-in;

transition-delay:.1s;

现在我们用一个实例来实现以下吧

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<style>

.test{

    overflow:hidden;

    width:100%;

    margin:0;

    padding:0;

    list-style:none;

}

.test li{

    float:left;

    width:100px;

    height:100px;

    margin:0 5px;

    border:1px solid #ddd;

    background-color:#eee;

    text-align:center;

    -moz-transition:background-color .5s ease-in;

    -webkit-transition:background-color .5s ease-in;

    -o-transition:background-color .5s ease-in;

    -ms-transition:background-color .5s ease-in;

    transition:background-color .5s ease-in;

    //可以看到，我们只设置了背景颜色一个属性，动画持续过渡时间为5s，动画的类型为 ease-in,没有设置延迟时间。

}

.test li:nth-child(1):hover{background-color:#bbb;}

.test li:nth-child(2):hover{background-color:#999;}

.test li:nth-child(3):hover{background-color:#630;}

.test li:nth-child(4):hover{background-color:#090;}

.test li:nth-child(5):hover{background-color:#f00;}

</style>

</head>

<body>

<ul class="test">

	<li>背景色过渡</li>

	<li>背景色过渡</li>

	<li>背景色过渡</li>

	<li>背景色过渡</li>

	<li>背景色过渡</li>

</ul>

</body>

</html>

这样做就省去了使用JavaScript来控制了，这个值得注意学习！

CSS属性--过渡(transtion)的更多相关文章

  1. css3中的变形（transform）、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  2. 1+X证书学习日志——css 2D&过渡

    css 位移常用属性 transform:translate(x,y): transform:translateX(); transform:translateY(); 旋转属性 2d旋转: tran ...

  3. 【CSS】过渡、动画和变换

    1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...

  4. CSS transition 过渡 详解

    transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...

  5. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  6. 值得注意的CSS属性

    文本TEXT letter-spacing 字符间距 word-spacing 字间距 line-height 行高 text-decoration 修饰(下划线) text-indent 首行缩进 ...

  7. css属性分类介绍

    css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...

  8. css属性（常用属性整理）

    摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 ...

  9. 容易忘记的css属性和动画属性

    动画属性 @keyframes 关键帧 --> animation 活泼 (配合使用) transform 变换 --> transition 过渡 (配合使用) 1.animation ...

随机推荐

  1. dropdownlist分页

    <div class="new-paging" id=""> <div class="new-tbl-type"> ...

  2. Cocos移植到Android的一些问题-中文乱码问题

    Android平台版本和设备碎片化很严重,因此从Win32平台移植到Android平台会有很多问题,下面是我们归纳的从Win32平台移植到Android平台遇到的一些问题.在Android平台中文乱码 ...

  3. NodeJs多进程和socket.io通讯-DEMO

    一.开启多进程 const os = require('os'); const cp = require('child_process'); const forkList = {}; const fo ...

  4. CSS制作彩虹效果

    今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子. 自己之前还没怎么遇到过这个问题,正好来研究一下. <div class="box1"></d ...

  5. 走出 null 就是空值的误区，以及变量赋值原理

    先放一张图片作为引入: 这里我用了一个示意图作为讲解: 平时,我们写的变量为什么能在我们调用它的时候就能被我们拿到所用,跟存钱罐一样,你往里面存一元大洋,它里面就有一元大洋,那么我们的变量在被我们创建 ...

  6. iOS ARC下循环引用的问题 -举例说明strong和weak的区别

    strong:适用于OC对象,作用和非ARC中的retain作用相同,它修饰的成员变量为强指针类型weak:适用于OC对象,作用和非ARC中的assign作用相同,修饰的成员变量为弱指针类型assig ...

  7. sql中更新数据库用到declare @a in

    declare @a in update TB_Class set @a=1,name='李小龙' where ID=1 这样就可以像更新哪个就更新哪个了 例如ibatisnet中需要更新的时候: & ...

  8. js----对象的创建

    js创建对象的三种方法 在介绍之前一定要弄清楚一个概念,比如var a = new Object(); 这里的a并不是一个对象,而是一个对象的实例. 一.用Json创造 var a = {b:1,c: ...

  9. MySQL语法语句大全

    一.SQL速成   结构查询语言(SQL)是用于查询关系数据库的标准语言,它包括若干关键字和一致的语法,便于数据库元件(如表.索引.字段等)的建立和操纵.   以下是一些重要的SQL快速参考,有关SQ ...

  10. 使用本地光盘安装Microsoft .NET Framework 3.5 for Win8.1/WinServer2012R2

    .NET Framework 3.5 作为的SQL Server 2012的先决条件,假如使用图形化方式需要使用internet,对于服务器部署时缓慢的一点(需要下载后安装) 以下提供一个使用使用安装 ...