CSS-3 Transition 的使用
css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值
一、transition-property: 比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果
二、transition-duration:
ransition-duration是用来指定元素 转换过程的持续时间,取值:为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。
三、transition-timing-function:
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:
1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。
所有值需在[0, 1]区域内,否则无效。
四、transition-delay:
transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:为数值,单位为s(秒)或者ms(毫秒),
其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。
参考网址A
最新文章
- quantile normalization原理
- Node.js文件系统、路径的操作函数
- Android 下载文件及写入SD卡
- java2实用教程102小程序(分数计算和流水线计算
- JavaScript螺纹的问题和答案
- linux-0.11抠代码-bootsect
- 350 - Pseudo-Random Numbers
- 13.Linux键盘驱动 (详解)
- vscode断点调试工程化服务端文件
- 请问实现MVC的框架有哪些,实现持久化操作的框架有哪些,还有类似于spring整合的框架又有哪些
- js 实现数组元素交换位置
- (转)Systemd 入门教程:命令篇
- 洛谷P2751[USACO]工序安排
- Node.js mzitu图片批量下载爬虫1.00
- TF卡.之前的(20180923)
- 1、SpringBoot------表单校验
- PHPthinking为全部PHP爱好者指路
- Fiddler代理配置
- 制作一个SSRS的ORACLE数据库报表,使用了时间类型的参数。
- Swift细节记录<;一>;