css3中变形与动画（二）

css3制作动画的几个属性：变形(transform)，过渡(transition)和动画(animation)。

transform介绍过了。接下来介绍过渡transition。

先通过一个例子感性认识一下transition的动画效果。

鼠标放上去，div宽度从100px增大到200px。

<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    div:hover{
        width: 200px;
    }
</style>
<div></div>

这效果其实也算是动画，但是非常变化非常快，不平滑。

如果想让鼠标放上去后div宽度在5s内平滑过渡到200px。只需要加一行代码；

div:hover{
    width: 200px;
    transition:width 5s ease-in;
}

这里用到的就是transition属性，它就是用来实现属性值平滑过渡，视觉上产生动画效果。

上面用的transition是缩写，包含四个属性:transition-property,transition-duration,transition-timing-function,transition-delay，下面会一一介绍。 

二、transition

css3新增transition属性，可以在事件触发元素的样式变化时，让效果更加细腻平滑。

transition用来描述如何让css属性值在一段时间内平滑的从一个值过渡到另一个值。这种过渡效果可以在鼠标点击、获得焦点、被点击或对元素任何改变中触发。

语法：

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 

transition有四个属性值：

transition-property:执行过渡的属性。

transition-duration:指定完成过渡需要的时间。

transition-timing-function,在延续时间段，过渡变换的速率变化，简单理解就是指定过渡函数。

transition-delay:过渡延迟时间。

1、transition-property

transition-property用来指定哪个属性使用过渡动画效果。

语法：

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

none:所有属性都不应用过渡效果。

all：默认值。当值为all时，元素产生任何属性值变化时都将执行transition效果。

ident：元素属性名。通过ident指定具体哪些属性。如果指定的多个属性中有某个属性不能应用过渡效果，其他属性还是生效的。

过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果。在w3c中列出了所有可以实现transition效果的css属性值以及值的类型，点这里查看。

Property Name     Type
background-color     as color
background-position     as repeatable list of simple list of length, percentage, or calc
border-bottom-color     as color
border-bottom-width     as length
border-left-color     as color
border-left-width     as length
border-right-color     as color
border-right-width     as length
border-spacing     as simple list of length
border-top-color     as color
border-top-width     as length
bottom     as length, percentage, or calc
clip     as rectangle
color     as color
font-size     as length
font-weight     as font weight
height     as length, percentage, or calc
left     as length, percentage, or calc
letter-spacing     as length
line-height     as either number or length
margin-bottom     as length
margin-left     as length
margin-right     as length
margin-top     as length
max-height     as length, percentage, or calc
max-width     as length, percentage, or calc
min-height     as length, percentage, or calc
min-width     as length, percentage, or calc
opacity     as number
outline-color     as color
outline-width     as length
padding-bottom     as length
padding-left     as length
padding-right     as length
padding-top     as length
right     as length, percentage, or calc
text-indent     as length, percentage, or calc
text-shadow     as shadow list
top     as length, percentage, or calc
vertical-align     as length
visibility     as visibility
width     as length, percentage, or calc
word-spacing     as length
z-index     as integer

View Code