分类
WEB++技术

CSS3–transition

transition:当一个元素的状态改变时,将一个元素的表现样式动态的进行过渡转换。

当一个元素的状态改变时,将一个元素的表现样式动态的进行过渡转换。个人认为是一个里程碑了。在未来,js就不必再去设定网页的表现,而专注于网页的行为了。

使用时,仍需带前缀:-webkit-transition,-moz-transition,-o-transition.目前,webkit内核浏览器支持的最全面,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现

transition:transition-property transition-duration transition-timing-function transition-delay

transition-property:要实现动态转换的css属性名。可以设定为all,则动态转换所有改变的属性值,包括transform
transition-duration:设定转换的时间,单位s(秒)
transition-timing-function:过渡时的效果,可以想象下幻灯片切换时的效果。常用值:ease | linear | ease-in | ease-out | ease-in-out
transition-delay:动态转换产生的延迟时间。不常用…

几个transition应用示例:

background:#594f4f;
-webkit-transition:all .25s linear;transition:all .25s linear;
-webkit-transform:scale(1.05) rotate(2deg);transform:scale(1.05) rotate(2deg);

-webkit-transition:border-bottom 0.25s ease;

unicac

...long long ago,he have a dream.

发表评论

邮箱地址不会被公开。 必填项已用*标注