您的位置：首页 > Web前端 > CSS

css过度效果

2015-12-30 23:19 633 查看

语法

transition：[,]*

= [ none | ] || || ||

默认值：看每个独立属性

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：看每个独立属性

媒体：交互

取值

<’ transition-property ‘>：

检索或设置对象中的参与过渡的属性

<’ transition-duration ‘>：

检索或设置对象过渡的持续时间

<’ transition-timing-function ‘>：

检索或设置对象中过渡的动画类型

<’ transition-delay ‘>：

检索或设置对象延迟过渡的时间

缩写方式

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;

案例演示

<!doctype html>
<html>
<head>
<title>test transtion</title>
<style>
ul{list-style: none;list-style-position: horizontal;}
ul li{width:100px;height:50px;float:left;background-color:#eee;padding:10px;margin-left:10px;
-webkit-transition:background-color .5s ease-in;
-moz-transition:background-color .5s ease-in;
transition:background-color .5s ease-in;
}
ul li:nth-child(1):hover{background-color:red;}
ul li:nth-child(2):hover{background-color:green;}
ul li:nth-child(3):hover{background-color:#90FF90;}
ul li:nth-child(4):hover{background-color:#2DA2C9;}
</style>
</head>
<body>
<ul>
<li>box1</li>
<li>box2</li>
<li>box3</li>
<li>box4</li>
</ul>
</body>
</html>

transition-property 定义参与过渡效果的元素

取值

none：

不指定过渡的css属性

all：所有可以进行过渡的css属性

：指定要进行过渡的css属性

有过渡效果的属性


属性名称	类型
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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航