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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:CSS如何实现双飞翼布局?
下一篇:margin垂直方向边界叠加

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月07日 11时38分08秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

c语言课程设计工资管理建库,C语言课程设计工资管理系统参考.doc 2019-04-21
c语言case中途跳出,break语句在switch结构语句中的作用是终止某个case,并跳出switch结构语句。... 2019-04-21
c51写c语言外部ram头文件,C51中访问外部RAM的方法 2019-04-21
51c语言产生随机证书,基于51单片机的随机数产生器设计-LCD1602-KEY-(电路图+程序源码)... 2019-04-21
C语言编写程序计算高考倒计时天数,基于51单片机LCD12864大字符校时万年历带高考倒计时程序... 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
laravel comment显示到页面最上面了_使用 Laravel 快速开发API接口,新手必读 2019-04-21
echart实现3d地图_orbslam_2生成稀疏点云地图的保存与加载的实现 邹鹏程 2019.9.15... 2019-04-21
bash 不是内部或外部命令_python学习笔记6-pip命令不是内部命令问题 2019-04-21
管道的另一端上无任何进程。_别被忽悠入坑!信号贴贴上就能信号满格?对手机信号无任何改善... 2019-04-21