CSS3过度属性Transiton

过度属性Trransition

使用css的属性值在一段时间内平滑的过度

比如这个效果 字体滑动
CSS3过度属性Transiton

四个要素和触发

过度属性,过度时间,过度函数,过度延迟的时间
触发主要通过用户触发,点击,悬浮等

过度属性

transition-property:none|all|property

多个属性用逗号隔开,
可设置过的属性有颜色,取值为数值的属性,转换属性,渐变属性,阴影属性

过度时间

transition-duration:s|ms /*默认值为0*/

过度函数

transition-timing-function:;

取值:
ease:默认值,规定慢速开始,然后变快,然后慢速结束
linear:匀速
ease-in:慢速开始,加速效果
ease-out:慢速结束,减速效果
ease-in-out:慢速开始和结束,先加速后减速

过度延迟

transition-delay:s|ms;

用户出发后,多长时间开始执行过度效果。

简写属性

语法:

transition:property duration timing-fubction dealy;

按顺序属性: 过度属性 过渡时间 过度函数 过度延迟执行

上一篇:# 第四章 Vue中的动画


下一篇:css学习笔记-5