www.baike369.com
百科369 > CSS3教程 > CSS3 transition-property属性

CSS3 transition-property属性


定义

CSS3的transition-property属性定义转换时应该使用的属性。


语法

transition-property:none | all | [ <IDENT> ] [ ',' <IDENT> ]*

相关属性:transition-duration、transition-timing-function、transition-delay。


取值

  • color:通过红、绿、蓝和透明度组件变换(每个数值处理)。
  • length:真实的数字。
  • percentage:真实的数字。
  • integer:离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生。
  • number:真实的(浮点型)数值。
  • transform list:请阅读transform。
  • rectangle:通过x、 y、width和height(转为数值)变换。
  • visibility:离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”。
  • shadow:作用于color、x、y和blur(模糊)属性。
  • gradient:通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画。
  • paint server (SVG):只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似。
  • space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化。
  • a shorthand property:如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化。

说明

属性名类型
background-colorcolor
background-imageonly gradients
background-positionpercentage, length
border-bottom-colorcolor
border-bottom-widthlength
border-colorcolor
border-left-colorcolor
border-left-widthlength
border-right-colorcolor
border-right-widthlength
border-spacinglength
border-top-colorcolor
border-top-widthlength
border-widthlength
bottomlength, percentage
colorcolor
croprectangle
font-sizelength, percentage
font-weightnumber
grid-*various
heightlength, percentage
leftlength, percentage
letter-spacinglength
line-heightnumber, length, percentage
margin-bottomlength
margin-leftlength
margin-rightlength
margin-toplength
max-heightlength, percentage
max-widthlength, percentage
min-heightlength, percentage
min-widthlength, percentage
opacitynumber
outline-colorcolor
outline-offsetinteger
outline-widthlength
padding-bottomlength
padding-leftlength
padding-rightlength
padding-toplength
rightlength, percentage
text-indentlength, percentage
text-shadowshadow
toplength, percentage
vertical-alignkeywords, length, percentage
visibilityvisibility
widthlength, percentage
word-spacinglength, percentage
z-indexinteger
zoomnumber

兼容性

CSS3 Safari 4, Chrome 2.0

示例

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3 transition-property属性示例-www.baike369.com</title>
<style type="text/css">
body{margin:100px;}
.transition_property{
    -webkit-transform:rotate(10deg);
    -webkit-transition-property:all; 
    -webkit-transition-duration:0.5s; 
    -webkit-transition-timing-function:ease-in;
}
.transition_property:hover{
    -webkit-transform:rotate(40deg);
}
</style>
</head>
<body>
<h1>CSS3 transition-property属性示例</h1>
<p>将鼠标移到图片上,图片会旋转!</p>
<br />
<p><img class="transition_property" src="append/20111104.jpg" width="240" height="179" /></p>
</body>
</html>

CSS3 transition-property属性示例

将鼠标移到图片上,图片会旋转!

Copyright© 2011-2016 www.baike369.com All Rights Reserved