transform移动_CSS中的变形，移动与过渡

transform	变形
translate	移动
transition	过渡

1.transform

可以向元素应用2D或3D转换，并且能够对元素进行旋转、缩放、移动、倾斜。只能转换由盒模型定位的元素。如果元素具有display: block，则由盒模型定位元素。

语法：transform: none | transform-functions；

常用值	描述
none	不进行转换
translate(x,y)	2D转换
translate3d(x,y,z)	3D转换
translateX(x,y)	只改变X轴的值
scale(x,y)	2D缩放转换
skew(x-angle,y-angle)	3D旋转，在参数中规定角度

---

2.translate

CSS属性translate允许单独声明平移变换，并独立于transform属性。这在一些典型的用户界面上更好用，而且无需在transform 中声明该函数了。

语法：translate: none | translate-functions；

none	不应用平移效果
单个长度/百分比值	二维平移，与声明了 X 轴和 Y 轴的平移一样，此时省略的第二个值默认为0。等同于在 translate() 函数中指定单个值
两个长度/百分比值	二维上分别按照指定X轴和Y轴的值进行的平移。等同于在 translate() 函数中函数指定两个值
三个长度/百分比值	分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于translate3d() 函数

---

3.transition

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是:hover，:active或者通过JavaScript实现的状态变化。

语法：transition: <property> <duration> <timing-function> <delay>;

常用值	描述
property	指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。
duration	指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。
timing-function	指定一个函数，定义属性值怎么变化。缓动函数Timing functions定义属性如何计算。多数timing functions由四点定义一个bezier 曲线。也可以从Easing Functions Cheat Sheet选择缓动效果。
delay	指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

当属性值列表长度不一致时

以transition-property的值列表长度为标准，如果某个属性值列表长度短于它的，则重复其值以长度一致。

将会像这样处理

如果某个属性的值列表长于transition-property的，将被截短。

将会像这样处理

关于过渡的一些例子

在元素上鼠标悬停时与开始动画，4s过渡改变字体大小，2s延迟

当鼠标悬停在菜单上时高亮此菜单

transition让JavaScript效果更平滑

使用 JavaScript 将球移动到一个位置

使用CSS 来平滑移动，只用简单地添加一个过渡