前端里面transform和transition 属性的区别

news/2025/10/10 20:22:44/文章来源:https://www.cnblogs.com/codedingzhen/p/19133801

transformtransition 都是用于在 HTML 中控制元素的视觉效果和动画的 CSS 属性,但它们的作用和功能不同。下面详细解释这两个属性的区别:

1. transform 属性

transform 属性允许你对元素进行 2D 或 3D 转换(即对元素进行形状、位置、旋转、缩放等的改变)。它是一个即时生效的属性,会直接影响元素的显示方式。

常用的 transform 操作包括:

  • translate():移动元素的位置。
  • rotate():旋转元素。
  • scale():缩放元素。
  • skew():倾斜元素。
  • matrix():用于同时应用多个转换。

示例:

<div style="width: 100px; height: 100px; background-color: red; transform: rotate(45deg);"><!-- 这个 div 会旋转 45 度 -->
</div>

2. transition 属性

transition 用来定义元素的属性变化过程中,过渡效果(也叫动画)。通过 transition,你可以让元素的属性在一段时间内平滑地变化,而不是立即改变。

  • transition 主要用于控制属性的变化如何进行动画过渡,它通常配合其他属性使用,比如 transformopacitycolor 等。
  • 通过设置过渡的时长、延迟、时间函数等,可以实现平滑的动画效果。

transition 常用的几个属性:

  • transition-property:定义哪些属性会参与过渡。
  • transition-duration:定义过渡效果的持续时间。
  • transition-timing-function:控制动画的速度曲线(比如线性、加速、减速等)。
  • transition-delay:定义过渡动画的延迟时间。

示例:

<div style="width: 100px; height: 100px; background-color: red; transition: transform 2s ease-in-out;"><!-- 这个 div 在过渡时,会平滑地旋转 -->
</div><script>// 使用 JavaScript 改变 transform 属性setTimeout(() => {document.querySelector('div').style.transform = 'rotate(45deg)';}, 1000); // 1秒后开始旋转,过渡时间为2秒
</script>

在这个例子中,divtransform 属性在 2 秒内平滑地从 0deg 过渡到 45deg

transformtransition 的区别

特性 transform transition
功能 用于立即改变元素的 位置、大小、旋转等 用于为元素的属性变化添加平滑的 过渡效果
应用 直接对元素应用变换效果,如旋转、缩放等。 用于控制当元素的属性值改变时,如何平滑过渡。
效果时间 变换立即生效。 通过设置 transition-duration 来指定动画的时间。
常用搭配 通常直接与具体的变换操作搭配,如 rotate()translate()scale() 通常与 transformopacity 等其他 CSS 属性一起使用。
示例 transform: rotate(45deg); transition: transform 2s ease-in-out;

结合使用 transformtransition

最常见的使用场景是将 transitiontransform 一起使用,使得元素在转换时能够平滑地动画过渡。例如,鼠标悬停时改变元素的位置或大小:

示例:平滑的缩放效果

<div style="width: 100px; height: 100px; background-color: red;transition: transform 0.3s ease-in-out;"><!-- 这个 div 会在鼠标悬停时平滑地缩放 -->
</div><script>document.querySelector('div').addEventListener('mouseover', () => {document.querySelector('div').style.transform = 'scale(1.5)';});document.querySelector('div').addEventListener('mouseout', () => {document.querySelector('div').style.transform = 'scale(1)';});
</script>

在这个例子中,div 会在鼠标悬停时平滑地放大 1.5 倍,鼠标移开时恢复原状,整个过程持续 0.3 秒。

总结:

  • transform:用于立即对元素进行位置、旋转、缩放等变换。
  • transition:用于设置元素属性变化时的过渡效果,使得属性变化更平滑。

通常你会将 transitiontransform 配合使用,以便实现平滑的动画效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/934380.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MAC环境】安装多个 JDK - 指南

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

CF2064E Mycraft Sand Sort

Sol 首先 \(c\) 不能变,否则第一列就会改变。 然后注意到 \(i,j(i<j)\) 能交换当且仅当满足以下任意一条:\(\displaystyle\max_{k=i+1}^{j-1}a_k<\min(a_i,a_j)\) i+1=j那么考虑从小到大做,每次把小的数删除,…

使用eBPF技术保护FastAPI安全

本文详细介绍如何利用eBPF技术保护面向互联网的API安全,包括FastAPI、Flask、Django等框架。通过secimport工具实现Python代码的实时追踪、沙箱策略构建和运行时监控,有效防御远程代码执行等安全威胁。使用eBPF保护F…

项目案例作业2:对案例进行面向对象分析

学生管理系统面向对象分析报告 小组成员:李天瑞 202421336012 目录学生管理系统面向对象分析报告1. 案例中哪里体现出了封装性及其好处?封装性的体现封装性带来的好处2. 案例中的setter/getter模式与封装性什么是set…

20251010周五日记

20251010周五日记今天十点多回学校了,好不容易不下雨了。没想到国庆还真加了那么多天班= = 今日: 1.早上吃完早饭收拾东西慢慢悠悠回来了,打印朋辈表多亏师哥妙手回春。准备去开学代会,说来又要翘课了。 2.中午吃了…

k8s 主节点重启后 从节点 get 异常 - 教程

k8s 主节点重启后 从节点 get 异常 - 教程pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "…

多维索引技术优化数据湖查询性能

本文介绍了一种通过多维索引技术优化数据湖查询性能的解决方案。该技术可直接集成到现有数据湖架构中,支持跨列复杂过滤,提升查询速度最高达6倍,同时降低70%计算成本,兼容主流计算引擎无需重构数据管道。Qbeast获7…

训练笔记:博弈杂题

[7-/7] A. 黎明\(1\sim n\) 排成一个环进行约瑟夫(隔一个删一个),求有多少个时刻,被删除的数的异或和为 \(0\)。 多测 \(10^5\) 组,\(n<10^{18}\)。hint:考虑把约瑟夫的过程分解为 \(\lceil\log n\rceil\) 个…

HTML5拖放API核心功能解析

好的,我们来详细解析一下 HTML5 拖放 API 的核心功能。 HTML5 拖放 API 允许用户在浏览器中抓取一个元素,并将其拖放到另一个位置。它原生支持在浏览器标签页、甚至不同浏览器、乃至桌面应用之间拖放,是现代 Web 应…

[USACO07NOV] Telephone Wire G

dp题,做法有点套路但是一开始没想到。 设 \(dp{_i}_j\) 表示第 \(i\) 位为 \(j\) 的最小花费。 然后直接往下转移就好了。点击查看代码 #include<bits/stdc++.h> #define fir first #define sec second #define…

springboot配置多个数据源

springboot配置多个数据源在我们的实际业务中可能会遇到;在一个项目里面读取多个数据库的数据来进行展示,spring对同时配置多个数据源是支持的。 使用到的框架:springboot+mybatis 方法:在配置文件中配置多个数据源…

Umi-OCR_文字识别工具 免安装使用教程(附下载安装包)!永久免费,开源离线OCR识别软件下载

软件介绍 在外面日常工作汇中,我们经常需要将图片、截图中的文字转换为可编辑文本。Umi-OCR应运而生——这是一款完全开源免费的离线OCR识别工具,无需联网即可本地完成高精度文字识别,保护你的数据隐私同时确保高效…

常量指针 和 指针常量

常量指针 和 指针常量Posted on 2025-10-10 19:52 steve.z 阅读(0) 评论(0) 收藏 举报如何牢记 “常量指针” 和 “指针常量” 的区别?🧩 一、先看词序规律:「前修后主」 在汉语里:前面的词修饰后面的词。比…

PyTorch 神经网络工具箱完全指南 - 详解

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

Apache POI:Java操控Office文档的利器

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

【汇总】OPPO r9m 分区名、分区功能

一、分区名、分区功能编号 分区名 英文说明 中文说明 备注、示例0preloaderfastboot 底层系统初始化程序分区 比 u-boot 更底层1pgpt2recovery系统救援工具、维护手机类似电脑PE系统3para4reserve15reserve26reserve37…

完整教程:LVDS系列30:Xilinx 7系 ADC LVDS接口参考设计(一)

完整教程:LVDS系列30:Xilinx 7系 ADC LVDS接口参考设计(一)2025-10-10 19:48 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !import…

【JAVA】从入门到放弃-01-HelloWorld - 指南

【JAVA】从入门到放弃-01-HelloWorld - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", &quo…

离线应用程序

离线应用程序(也称为离线Web应用程序或PWA,Progressive Web Applications)是一种使用现代Web技术开发的,能够在没有网络连接的情况下运行的Web应用程序。这类应用通常使用服务工作线程(Service Workers)、缓存存…