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

2024年04月08日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客


语法:

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: 加速运动


本文链接:http://so.lmcjl.com/news/1518/

展开阅读全文
相关内容