Transform
根据我的理解，transform和width、height、background一样，都是dom的属性，不同的是它是css3旗下的，比较屌，能够对原来的dom元素进行移动、缩放、转动、拉长或拉伸，跟canvas上的某些api神似，这么说来transform好像能干些js才能干的事。
transform分2D变换和3D变换，w3school中有很好的介绍和例子
Transition
transition的解释是过渡，我的理解是css之间的变换，但是这个变换很屌很平滑，类似动画。举个栗子，一开始某个dom的类是classA，通过某种操作（比如被点击了）后变成了classB，如果没有transition，类之间的变换是很快的，机械般瞬间完成，但是有了transition，这便会是一个很缓和平滑的过程。
transition有4个属性：语法：transition: property duration timing-function delay 从前到后4个属性依次可理解成“过渡动画变换的属性”、“过渡花费时间”、“过渡过程的速度变化”和“过渡开始前的等待时间”（默认值：all 0 ease 0 前两个是必须的 后两个可省略）。
过渡属性:
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
Animation
Animation的解释是动画，加强版的transition。
如果说transition能实现某些js效果，animation就更像是js了。类似于写一个canvas特效，特效总共比如说多少时间，我们能规定在什么时候该出现什么样的场景，而各个场景间的转换则完全由css3本身负责，而keyframes好比定义了一个js方法。
主要应用在某个元素需要进行连续的n次css变换。
动画属性:
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
时间： 2024-11-08 13:42:40