CSS3过渡与动画

过渡效果发生四个条件：一个初始条件、一个终止条件、过渡本身和触发器。当触发器不再符合条件时，过渡会有相反的表现。

属性

transition-property:指定元素的哪一个（或多个）属性会有动画效果。

E{ transition-property:keyword; }

keyword接受关键字，all、none，或者是一个有效的css属性，默认为all。

持续时间

transition-duration:定义了过渡开始到结束的时间长度。

E{ transition-duration:time; } //单位为s或者ms，默认为0。

计时函数

transition-timing-function:过渡方式，速度变化。属性值可以是关键字或者是cubic-bezier函数。

E{ transition-timing-function:keyword; }

Keyword可以为ease、linear、ease-in、ease-out、ease-in-out，默认为ease，其效果是慢慢开始，快速加速，结尾减速。

函数为立方贝塞尔曲线：cubic-bezier(x1,y1,x2,y2);

延迟

transition-delay：设置过渡开始的时间。单位为s或ms，默认为0，即不延迟。也可以为负值，这时过渡开始的时候会减去已经延迟的时间，过渡会从中途开始。

简写

E{ transition:transition-property transition-duration transition-timing-function transition-delay; } 例：

h1{

font-size:150%;

transition:font-size 2s ease-out 250ms;

}

h1:hover{

font-size:600%;

}

多重过渡

E{

transition-property:border-width,height,padding;

transition-duration:4s,500ms,4s; //如果属性值少，那么值列表会被循环

}

E{ transiton:border-width 4s,height 500ms,padding 4s; }

创建动画的第一个步骤是定义关键帧。Css过渡本质上是一个只有两个关键帧的动画。@keyframes ‘name’ {

keyframe {

property:value;

}

}

例：

@keyframes ‘expand’{

from{ border-width:10px; }

50%{ border-width:1px; }

to{

border-width:1px;

height:120px;

width:150px;

}

}