Css3过渡动画 transition 属性介绍以及使用

语法:transition: 过渡属性 过渡时间 过渡方式 过渡延迟时间;1. 过渡属性( transition-property ) 取值: all: 所有发生改变的css属性都添加过渡 ident: 指定css属性过渡列表 none: 没有css属性过渡 eg:transition: all 1s; transition: transform 1s,background 2s;2. 过渡时间( transition- 0 Comments


语法:

transition: 过渡属性 过渡时间 过渡方式 过渡延迟时间;


1. 过渡属性( transition-property )

取值:

all: 所有发生改变的css属性都添加过渡

ident: 指定css属性过渡列表

none: 没有css属性过渡

eg:

transition: all 1s;
transition: transform 1s,background 2s;


2. 过渡时间( transition-duration )

取值:

0: 不执行过渡，直接看结果

time: 指定动画执行的时间，单位s


3. 延迟时间( transition-delay )

取值:

0: 不延迟，正常执行动画

正数: 按照延迟的时间执行动画

负数: 设置时间之前的动画将会被截断

eg:

transition: all 2s 1s;


4. 过渡方式( transition-timing-function )

取值:

ease: 默认值

ease-out: 减速 运动

linear: 匀速运动

ease-in-out: 慢-快-慢

ease-in: 加速运动


本文链接：https://my.lmcjl.com/post/20956.html

展开阅读全文

相关文章

4 评论

留下您的评论.