transform、translate、transition、animation区别
发布日期:2021-11-21 16:35:45
浏览次数:7
分类:技术文章
本文共 561 字,大约阅读时间需要 1 分钟。
1. transform:描述了元素的静态样式,本身不会呈现动画效果,主要应用于元素的 2D 或者 3D转换,可以将元素 旋转、缩放、移动、倾斜等,使用的时候注意兼容性就好了;
2. translate:主要控制目标元素的移动(2D、3D)。目前为止还可以说是一个 CSS 变换函数,赋值给transform使用,而不是一个完全可以单独使用的css属性,因为目前只有火狐浏览器支持它的css属性写法;
3. transition:CSS过渡属性,为一个元素在不同状态切换的时候定义不同的过渡效果。
4. animation:CSS 动画,将元素的样式配置转换到另一个CSS配置。包括动画所使用的样式规则,以及用于指定动画开始、结束以及中间多个节点的关键帧;
transition通常和hover等事件配合使用,由事件触发。animation则立即播放。 animation可以设定循环次数。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。 animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果转载地址:https://blog.csdn.net/yyychocolate/article/details/108152024 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月07日 11时38分08秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
c语言课程设计工资管理建库,C语言课程设计工资管理系统参考.doc
2019-04-21
c51写c语言外部ram头文件,C51中访问外部RAM的方法
2019-04-21
c语言打开一个html文件路径,C语言文件处理-C语言文件的打开和关闭
2019-04-21
普职融通信息技术课本C语言,“三步走”扎实推进“普职融通”办学新模式
2019-04-21
Android多个签名,【Android】Android批量重签名
2019-04-21
html unicode编码转换,JS实现的Unicode编码转换操作示例
2019-04-21
html页面角落放动漫人物,L2Dwidget.js L2D网页动画人物添加
2019-04-21
html图片水平居中,CSS制作图片水平垂直居中
2019-04-21
水滴pin安卓版apk_财务报销管理系统
2019-04-21
平面设计师okr_设计团队的KPI/OKR如何制定?
2019-04-21
仪表盘故障图像识别_仪表显示的图像识别算法研究
2019-04-21
c#背单词小程序视频_C#用timer实现背单词小程序
2019-04-21
24v开关电源维修技巧_【电视技术】液晶电视电源板十个维修经验分享
2019-04-21
bash 不是内部或外部命令_python学习笔记6-pip命令不是内部命令问题
2019-04-21