本文详细介绍了CSS中的过渡属性transition，包括transition-property、transition-duration、transition-timing-function和transition-delay。它允许开发者定义元素在状态改变时的动画效果。文章强调了各个子属性的默认值和使用注意事项，如过渡时间不能为负值，延迟时间若为负值将导致过渡从设定值开始。同时，还提到了不同浏览器的兼容性问题。
定义
过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果
- transition-property: 过渡属性(默认值为all)
- transition-duration: 过渡持续时间(默认值为0s)
- transiton-timing-function: 过渡函数(默认值为ease函数)
- transition-delay: 过渡延迟时间(默认值为0s)
[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法
transition说明
复合属性。检索或设置对象变换时的过渡。
可以为同一元素的多个属性定义过渡效果
如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写：
如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写：
对应的脚本特性为transition。
transition实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS transition属性详解-CSS教程</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font-size:16px;}
.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;}
.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>
<h1>请将鼠标移动到下面的矩形上：</h1>
<ul class="test">
<li>背景色过渡</li>
<li>背景色过渡</li>
<li>背景色过渡</li>
<li>背景色过渡</li>
<li>背景色过渡</li>
</ul>
</body>
</html>
过渡属性
transition-property
值: none | all | <transition-property>[,<transition-property>]*
初始值: all
应用于: 所有元素
继承性: 无
过渡持续时间
该属性的单位是秒s或毫秒ms
transition-duration
初始值: 0s
应用于: 所有元素
继承性: 无
[注意]该属性不能为负值
[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
过渡延迟时间
该属性定义元素属性延迟多少时间后开始过渡效果，该属性的单位是秒s或毫秒ms
transition-delay
初始值: 0s
应用于: 所有元素
继承性: 无
[注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果
[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
过渡时间函数
过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果
transition-timing-function
初始值: ease
应用于: 所有元素
继承性: 无
取值
过渡时间函数共三种取值，分别是关键字、steps函数和bezier函数
steps函数
steps步进函数将过渡时间划分成大小相等的时间时隔来运行
steps步进函数为
扫一扫
1564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
