transition transform translate 之间的区别

文章目录

01.transform(转换) 和 translate
02.transition(过渡)

01.transform(转换) 和 translate

transform的中文翻译是变换、变形，是css3的一个属性，和其他width，height属性一样

translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少

例如：

transform：translate(0,100%)表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离
transform：translate(-20px,0) 表示从元素的当前位置延x轴方向，向左移动20px
transform 有很多其它属性值
translate3D定义 3D 转换
scale 定义 2D 缩放转换
rotate 定义 2D 旋转，在参数中规定角度
skew 定义沿着 X 和 Y 轴的 2D 倾斜转换

02.transition(过渡)

transition 在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性
语法 transition：需要变换的属性变换需要的时间控制动画速度变化延期多少时间后开始执行
transition-property规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是"ease"。
transition-delay 规定过渡效果何时开始。默认是 0。

transition属性写在最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式。

例如：
transition:width 2s;
transition:translate 2s;
transtion:all 2s;

transition transform translate 之间的区别相关推荐

[css] transition、animation、transform三者有什么区别？
[css] transition.animation.transform三者有什么区别? transition:比较简单的过度动画animation: 使用keyframe自定义动画,比较详细的动画过 ...
css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
css旋转动画定义中心,css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
循环前增加和后增加之间的区别？
本文翻译自:Difference between pre-increment and post-increment in a loop? Is there a difference in ++i an ...
静态方法和类方法之间的区别
用@staticmethod装饰的函数和用@staticmethod装饰的函数有@staticmethod @classmethod ? #1楼静态方法是一种对所调用的类或实例一无所知的方法. 它只 ...
【学习日志】2022.09.02 (C++)strcmp和stricmp、strcmpi三者之间的区别、C语言判断文件后缀名、ZENO Audio Update、TEN MINUTES PHYSICS
(C++)strcmp和stricmp.strcmpi三者之间的区别 (strcmpi在Windows C标准库实现,但不在GNU C标准库实现) #include <string.h> ...
FPGA与ASIC：它们之间的区别以及使用哪一种？
FPGA与ASIC:它们之间的区别以及使用哪一种? FPGA Vs ASIC: Differences Between Them And Which One To Use? VL82C486 Sing ...
Python 应用领域以及版本之间的区别
Python 应用领域以及版本之间的区别一．Python应用领域 Python+人工智能,给你更多研究方向选择! 企业级综合实战项目,集六大前沿技术为一体二. Python 2与Python 3的 ...

transition transform translate 之间的区别

文章目录

01.transform(转换) 和 translate

02.transition(过渡)

transition transform translate 之间的区别相关推荐

最新文章

热门文章