transition(过渡)
2024-10-19 00:23:27
transition:过渡
渡过渡原理:原始状态a状态-向-最终结束状态b状态
格式:transition: all 1s linear;
过渡的四个参数:
1、参与过渡的属性(属性(width)/all)
值 描述
linear 动画从头到尾的速度是相同的,linear慢慢开始过渡并成线性方式显示
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
注:cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中有自己的值。可能的值是从 0 到 1 的数值。
2、过渡的时间s,需要加上时间单位 过渡的类型。
3、过渡的效果类型
4、延迟执行的时间
-webkit-transition:all 1s linear; (chrome,safari(苹果))
-ms-transition:all 1s linear; (IE 微软)
-moz-transition:all 1s linear; (Firefox)
-o-transition:all 1s linear; (欧鹏)
注:display: none (or block); display 属性是没有过渡效果的,因此在需要过渡的地方不能用它做为显示和隐藏的属性;可以用visibility: visible/hidden 或 opacity:0-1来进行显示隐藏。
最新文章
- SQL中NULL值
- UIAlertController警告视图和操作表单
- python opencv 利用Lab空间把春天的场景改为秋天
- 配置appium 1.6.3 for MAC
- thinkphp学习简易教程(一) thinkphp创建项目
- openlayers 学习笔记之1
- pl/sql developer 连接本地ORACLE 11g 64位数据库
- Javascript异步数据的同步处理方法
- deepinmind(转)
- python setup.py install 报错ImportError: No module named setuptools
- ob_start、ob_get_contents使用
- SQL字符串操作汇总
- Windows之MySQL安装教程
- Sharepoint 2016 配置FBA(一) 创建Membership数据库
- day 01 python基础
- create table 推荐规则
- Nginx增加模块
- Activity工作流学习(一)——Activity服务类
- Kubernetes简述
- 数据挖掘比赛优秀经验贴-收集ing