CSS3过渡延迟总结
CSS3过渡延迟总结
- 1. 元素状态
- 2. 过渡实现
- 2.1 设置哪些属性应用过渡效果
- 2.2 js过渡完成事件监听API
- 2.3 设置过渡时间
- 2.4 控制过渡效果的速度
- 2.4.1 平滑过渡
- 2.4.2 步进过渡
- 2.5 设置过渡延迟时间
- 2.6 过渡组合写法
一般情况下CSS属性的变化是瞬时变化的,但是CSS过渡可以控制变化效果,让变化平滑发生。
但是并不是所有的CSS属性都有过渡效果,具有过渡效果的CSS属性有:支持动画的CSS属性
一般具有中间值的属性有过渡效果,比如:宽度,因为宽度属性值是数值类型,元素宽度从100px变化到300px,会有中间值100px~200px之间,因此具有过渡效果。而边框样式没有过渡效果,边框从solid
到dotted
没有中间值来进行变化,因此没有过渡效果。
1. 元素状态
假定元素在变化过程中有以下两种状态:
初始态
当页面加载完成之后的样式状态。
变化态
元素由初始状态变化后的状态。
2. 过渡实现
注意:哪个元素需要过渡变化,就将过渡属性设置在哪个元素上。
当元素只需要对某个属性进行过渡效果设置,其他属性不需要设置的时候。则需要对指定属性进行设置。
2.1 设置哪些属性应用过渡效果
transition-property
可以设置哪些属性可以应用过渡效果。
- 默认为
all
即所有属性都发生过渡效果 none
所有属性都不发生过渡效果- 多个属性值采用逗号隔开
transition-property: background-color;
此时只对元素的背景颜色进行过渡效果应用,结果为:
可以看出,由于只有背景颜色应用了过渡效果,此时可以看出宽度/高度没有过渡产生,从而显得很生硬。
2.2 js过渡完成事件监听API
JS提供了一个动画API接口transitionend
,用于控制过渡结束之后执行的JS事件。也即设置了过渡效果的属性当过渡效果完成之后,会触发transitionend
事件,所以对于简写属性,则会触发多次,比如:border-radius
会触发四次,原因:boder-top/right/bottom/left
四个属性独立设置过渡,就会会四次事件。
transitioned
事件被触发会得到一个事件触发对象,该对象里面包含了以下属性:
属性 | 说明 |
---|---|
propertyName | 由transition-property设置可应用过渡的属性中当前过渡完成的属性 |
elapsedTime | 过渡花费的时间 |
pseudoElement | 过渡的伪元素 |
isTrusted | true:用户触发,false:脚本触发 |
比如:
<main><div>1</div>
</main><style>
div {width: 100px;height: 100px;background: #48dbfb;display: flex;justify-content: center;align-items: center;transition: 2s;position: relative;
}main:hover div {// 高度/宽度变化width: 200px;height: 200px;background-color: #999999;
}main div::after {content: "Cheng";position: absolute;bottom: -100px;color: #fab1a0;transform: translateX(-999px);transition: 2s;
}main.move {transform: translate(0px);
}
</style><script>// 监听div盒子某些属性过渡完成事件,当某些属性过渡完成就会触发这个事件。document.querySelector("div").addEventListener("transitionend",function (e) {console.log(e);})
</script>
由于此案例有三个属性值应用了过渡,分别是width height background-color
,所以这些属性进行过渡变化的时候会触发三次监听事件,当属性回到原来状态的时候,又会触发三次监听事件,所以一共触发六次监听事件。
2.3 设置过渡时间
可以使用transition-duration
设置过渡时间
单位为:
ms
s
1s = 1000ms
默认为0s,也即不产生过渡效果。
可以设置多个属性值
当为一个值的时候,
transition-property
设置的所有属性使用同样的时间当属性值个数大于1,且小于
transition-property
设置的属性个数的时候,采用循环的方式,依次应用每个过渡时间于属性上。也即:
transition-property: border-radius,width,height,background-color;
transition-duration: 1s,200ms,2s;
此时,第1~3个属性值分别使用对应位置的时间,而第四个属性值则再应用第一个时间。
当属性值大于
transition-property
设置的属性个数的时候,属性与时间一一对应即可,而多余的时间则不起作用。
案例:
transition-duration: 10s
可以看出元素从一个状态变化到另一个状态花费了10s的时间。
2.4 控制过渡效果的速度
可以使用transitio-timing-function
控制过渡效果的速度。
在CSS中有两种过渡方式:平滑过渡和步进过渡。
不同于平滑过渡,步进过渡将过渡时间划分为指定步数,在不同步数下进行过渡设置。
2.4.1 平滑过渡
参数值:
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 开始慢,然后快,慢下来,结束时非常慢(cubic-bezier(0.25,0.1,0.25,1)) |
ease-in | 开始慢,结束快(等于 cubic-bezier(0.42,0,1,1)) |
ease-out | 开始快,结束慢(等于 cubic-bezier(0,0,0.58,1)) |
ease-in-out | 中间快,两边慢(等于 cubic-bezier(0.42,0,0.58,1)) |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值 |
如果内置属性值不能满足要求,则可以通过自定义属性值。
使用cubic-bezier
来控制曲线速度,而该曲线为贝塞尔曲线,通过改变其形状达到控制元素速度。
参数为:cubic-bezier(x1,y1,x2,y2)
其中通过设定两个点的坐标从而达到对贝塞尔曲线的绘制,具体可以通过[ https://cubic-bezier.com]( https://cubic-bezier.com)调试。
使用调试之后获得的值应用到页面中:
transition-timing-function: cubic-bezier(.1,.79,.15,-0.61);
页面展示效果和在调试中获得的效果一致。
2.4.2 步进过渡
使用steps
属性函数/step-x属性值进行设定
选项 | 说明 |
---|---|
steps(n,start) | 设置n个时间点,在每个时间点开始就进行变化状态 |
steps(n,end) | 设置n个时间点,每个时间点快结束时进行变化状态 |
step-start | 等于steps(1,start) |
step-end | 等于steps(1,end) |
transition-duration: 2s;
transition-timing-function: steps(5,end);
以上表示将时间划分为5份,然后在每一份时间点的结束时变化状态
也即出现以下效果:
可以看出将整个过程分为了5份,然后每份变化都是在每一份快结束的时候进行变化,这个效果可能不是太明显。接下来对整个过程当作1份看待,也即:
transition-duration: 2s;
transition-timing-function: steps(1,end);
可以看出,由于整个过程只有一份,且规定让其在该时间点结束时才开始变化,所以可以明显看到,等待2s之后,元素才开始变化。
2.5 设置过渡延迟时间
当需要过渡效果在一定时间之后才展示,则可以通过transition-delay
设置过渡延迟事件。
属性值:
s / ms
1s = 1000ms
使用方式与transition-duration
一致
由于元素发生变化的时候,比如鼠标悬浮改变元素尺寸,此时在元素改变尺寸之前就移开鼠标,这个时候元素不会改变尺寸的。所以如果在设置的延迟之间之内取消事件,那么元素则不会改变尺寸。
假设元素设置了3s延迟,且设置鼠标悬浮改变元素尺寸事件
<main><div>1</div>
</main><style>
div {width: 100px;height: 100px;background: #48dbfb;display: flex;justify-content: center;align-items: center;// 设置3s延迟transition-delay: 3s;transition-duration:2s;position: relative;
}main:hover div {width: 200px;height: 200px;background-color: #999999;
}
</style>
可以看到3s之后元素开始过渡变化,最后鼠标悬浮时间小于3s就离开,发现元素并没有响应变化。
2.6 过渡组合写法
使用transition
对transition-property transition-duration transition-timing-function transition-delay
进行统一设置
必须设置
transition-duration
transition-delay
放于transition-duraion
后进行设置transition: [transition-property transition-timing-function] transition -duration [transition-delay]
CSS3过渡延迟总结相关推荐
- 好程序员web前端技术之CSS3过渡
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- html过渡的触发机制是什么,CSS3过渡 transition
之前我们整理了CSS3中的动画属性 Transform 转换,今天我们接着一起来看看CSS3中的另一个动画属性 Transition 过渡. W3C标准中对css3的transition这是样描述的: ...
- css 字体颜色阶梯过渡,CSS3——过渡(transition)
一.概述 CSS属性的值从一个值变成另一个值的过程叫做渐变,重点突出变化的过程.CSS3 transition系列属性可控制这个变化过程,使得属性值变化过程更加平滑.一个过渡应包含这几个属性: A:哪 ...
- Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性: 属性 描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...
- CSS3 过渡(Transition)
过渡 transition 复合属性,使CSS属性值在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果 取值: <'transitio ...
- css3圆角360度转动画,target,框架集,css3过渡动画,css3圆角-阴影-透明度,运动曲线,图片文字遮罩,变形...
target 模拟后台服务器 框架集 frameset和body不合,所以如果用frameset就不能有body标签 利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显 示不 ...
- CSS3过渡练习-进度条(CSS3)
CSS3过渡练习-进度条(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
- CSS3 过渡-盒子切换之鼠标经过背景高亮
CSS3 过渡-盒子切换之鼠标经过背景高亮 源码: <!DOCTYPE html> <html lang="en"><head><meta ...
最新文章
- 神经网络与机器学习 笔记—复制器(恒等)映射
- 如何使用纯 CSS 创建翻牌动画
- TKinter的常用组件
- 昂贵的聘礼 poj 1062 dijsk
- cloudstack+ceph中解决ceph单点问题
- Python里面使用的容器
- 基于SpringCloud开发的分布式系统,遇到爬虫、接口盗刷怎么办?
- 【交易技术前沿】低时延基础设施杂谈
- Windows,bat批量ping脚本
- C++函数模板特化,类模板特化
- [寒江孤叶丶的CrossApp之旅_07][入门系列]CrossApp中信息框CAAlertView的使用
- SPSS如何进行随机抽样
- 【硬十宝典】——7.1【动态RAM】DDR硬件设计要点
- 数据中心行业深度报告:从财务分析看IDC行业的投资价值
- 2022-2028全球环氧水泥地坪漆行业调研及趋势分析报告
- 致敬赵雷:基于TensorFlow让机器生成赵雷曲风的歌词
- linux(xshell的安装与使用)
- 用NCL将GRIB/GRIB2文件转成nc文件(批量转),JRA-55再分析为例
- THHN vs. XHHW: What Is the Difference?
- 2021年12月电子学会Python等级考试试卷(二级)答案解析