过渡相关属性:
css3过渡效果涉及到四个属性,也可以使用包含这四个属性的缩写。
- transition-property:要过渡的css属性名称(比如background-color、text-shadow或者all使用all则过渡会被应用到每个可能的css属性上)
- transition-duration:定义过渡效果持续的时间(单位为秒如,.3s、.2s或者1.5s)
- transition-timing-function:定义过渡期间速度如何变化(如ease、linear、ease-in、ease-out、ease-in-out或者cubic-bezier)
- transition-delay:可选,用于定义过渡开始前的延迟时间。相反,将该值设置为一个负数,可以让过渡效果立即开始,但过度路程则会从半路开始。
单独使用各种过渡属性创建转换效果的语法如下:
#content a{
transition-property:all;
transition-duration:1s;
transition-timing-function:ease;
transition-delay:0s;
}
简写版:
#content a{
transition:all 1s ease 0s;
}
使用简写版时要注意,声明中的第一个时间值总会被应用给transition-duration,第二个时间值总会被赋值给transition-delay。
还可以在不同时间段对不同的属性进行过渡,属性的不调不必一致,如:
#content a{
/**其他样式**/
transition-property:border,color,text-shadow;
transition-duration:2s,3s,4s;
}