一、tranform

• 四个常用功能

1.tranform之translate

（1）translateX()

（2）taanslateY()

（3）tranlate( , )

（4）translateZ()且父容器perspeective

（5）translate(x,y,z)

• 学会看懂MDN的语法事例
• translate(-50%,-50%)可做绝对定位居中

2.translate之scale

(1)常用的写法

• scaleX()
• scaleY()
• scale( , )

• 这个用的较少，容易出现模糊

3.translate之rotate

(1) rotate([ | ])

(2) rotateX([ | ])

(3) rotateY([ | ])

(4) rotateZ([ | ])

• 一般用于360度旋转制作loading
• 用到时可以搜索rotate MDN看文档

3.transform之skew

(1)skewX([|])

(2)skewY([|])

(3)skew([|] , [|])

4.transform的多重效果

transform:scale(0.5)tranlate（-100%。-100%）；

transform：none;取消所有

二、transition过渡

1.作用：补充中间帧

2.语法

• transition:属性名 时长 过渡方式 延迟

  transition:left 200ms linear

• 可以用逗号分隔两个不同属性

  transition:left 200ms,top 400ms

• 可以用all代表所有属性

  transition:all 200ms

• 过渡方式有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bazier|step-start|step-end|step,具体含义（要靠数学知识）

注意：

• 并不是所有属性都能过渡 （1）display:none => block 没法过渡 （2）一般改成visibility:hidden => visible （3）background颜色可以过渡 （4）opacity也可以过渡
• 过渡要有起始（一般只有一次动画或者两次，比如hover和非hover过渡状态）
• 如果除了有起始，还有中间点怎么办

两种方法：

1.使用两次transform

• .a=== transform ===>.b
• .b=== transform ===>.c
• 用setTimeout或者监听transitionend事件

2.使用animation

• 声明关键帧（@keyframes）
• 添加动画

• 如果想要动画停在最后一帧，可以搜索css animation stop at end,就是在后面加forwords

3.@keyframes完整语法

• 可搜索keyframes MDN了解更多
• 百分比写法

• from to写法

三、animation

1.缩写语法

animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；

• 时长：1s或者1000ms

• 过渡方式：跟transition取值一样，如linear

• 次数：3或者2.4或者infinite

• 方向：reverse|alternate|alternate-reverse

• 填充模式：none|forwards|backwards|both

• 是否暂停：pause|running

• 以上所有属性都有对应的单独属性