CSS3中的Transition属性详解.doc

《CSS3中的Transition属性详解.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS3中的Tｒansｉtｉｏn属性详解Ｗ3Ｃ标准中对ＣSS3的trａnsitiｏn这是样描述的：”CSＳ的trａnｓition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。＂下面我们从最简单的语法和属性值开始一步一步来学习transｉｔion的具体使用：语法：123traｎsitioｎ　：　［<'tranｓitｉｏn—ｐｒopeｒty’>

2、｜<＇transｉtiｏn-duration'>｜

3、＜'tｒansitｉon—tｉming—functi

4、on’>｜

5、<’ｔransition—ｄelay’>　［，[<’tranｓｉtｉon－property'>

6、｜〈’trａnsitiｏｎ-duraｔｉoｎ'〉｜

7、　<'traｎｓition—timｉng－ｆunctiｏn’>

8、

9、　〈’transiｔioｎ-deｌaｙ’>］]*traｎsｉtiｏn主要包含四个属性值：执行变换的属性:trａnｓｉtiｏｎ-ｐrｏpｅrtｙ；变换延续的时间:transｉtｉｏn-ｄuｒａtion；在延续时间段，变换的速率变化tranｓｉtion—timｉng—fｕncｔioｎ；变换延迟时间tｒansitioｎ—delａy

10、。下面分别来看这四个属性值:一、transitiｏn—property：语法:.trａnｓition－propｅrty　：ｎｏne　

11、ａll｜［　

12、以指定元素的某一个属性值。其对应的类型如下:1、coloｒ：　通过红、绿、蓝和透明度组件变换(每个数值单独处理）,如：baｃkｇrｏund－ｃolor，borｄeｒ-color，cｏloｒ,oｕtliｎe-coｌoｒ等CSＳ属性；２、lｅnｇtｈ:真实的数字,如：word-ｓpacing，width，ｖｅｒticaｌ-ａliｇn，top，riｇｈt，bottom,left,paｄding，outｌｉne—width，maｒｇｉn，ｍin—widtｈ，min—　hｅｉｇht，ｍaｘ—ｗidth，max-ｈeigｈｔ，linｅ—height，heiｇ

13、hｔ，border—ｗidth,ｂorｄer—sｐacing，ｂackｇroｕnｄ-ｐosition等属性;3、percｅnｔage：真实的数字，如：word—spaｃｉｎg，widｔh,ｖerticａl—alｉgｎ,ｔｏp，ｒighｔ，ｂottom,ｌeｆt，ｍin—ｗiｄth，min—heigｈt,ｍax—width，max—heiｇht，ｌiｎe-hｅight,hｅｉｇht，bａckground—position等属性；4、inteｇer离散步骤(整个数字），在真实的数字空间,以及使用floｏｒ(）转换为整数时发生，如：ouｔline－of

14、ｆsｅｔ，z-iｎdex等属性；５、number真实的（浮点型)数值，如：zｏom，ｏpａｃity,font-weighｔ等属性;6、tｒansfｏrmlｉｓt:详情请参阅:《ＣSS3Tｒaｎsform》。７、ｒecｔaｎｇlｅ:通过x、ｙ、　wiｄth和ｈeigｈt（转为数值）变换，如：ｃrｏｐ；8、ｖiｓibｉlｉty：离散步骤，在0到1数字范围之内，0表示"隐藏＂,1表示完全"显示”,如:ｖisibilitｙ；9、shadow：作用于ｃolor、x、y、和blur（模糊）属性，如:texｔ-ｓhadｏｗ；１0、gradient:通过每次停止

15、时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：bａckground-iｍage；11、painｔserｖｅｒ（SＶG):只支持下面的情况：从gｒadienｔ到gｒａdienｔ以及color到ｃoｌor,然后工作与上面类似;１2、spaｃｅ－separａtedｌistoｆabｏvｅ：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；13、ａ　shoｒthaｎd　pｒoperty：如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化。具体什么CＳS属性可以实现t

16、ｒanｓｉtiｏn效果，在W3Ｃ官网中列出了所有可以实现tranｓiｔion效果的CSS属性值以及值的类型，大家可以点这里了解详情.这里