css hover变成手_CSS 知识总结

一. 浏览器渲染原理

渲染树,构建,布局绘制​developers.google.com 渲染性能​developers.google.com 使用transform来实现动画​developers.google.com

• 根据HTML构建HTML树(DOM)
• 根据CSS构建CSS(CSSOM)
• 将两棵树合并成一颗渲染树(render tree)
• Layout布局(文档流，盒模型，计算大小和位置)
• Paint绘制（把边框颜色，文字颜色，阴影等画出来）
• Compose合成（根据层叠关系展示画面）

二. CSS 动画的两种做法（transition 和 animation）

(一)transition

四个常用功能

• 位移: translate
• 缩放: scale
• 旋转: rotate
• 倾斜: skew

经验

• 一般都需要配合transition过渡
• inline元素不支持transform，需要先变成block

1. transform之translate

常用写法

• translateX(<length-percentage>)
• translateY(<length-percentage>)
• translate(<length-percentage>,<length-percentage>?)
• translateZ<length>且父容器perspective
• translate3d(x,y,z)

经验

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

2. transform之scale

常用写法

• scaleX(<number>)
• scaleY(<number>)
• scaleZ(<number>,<number>?)

3. transform之rotate

常用写法

• rotate([<angle>|<zero>])
• rotateZ([<angle>|<zero>])
• rotateX([<angle>|<zero>])
• rotateY([<angle>|<zero>])
• rotate3d复杂

经验

• 一般用于360度旋转制作loading
• 用到时再搜索rotateMDN看文档

4. transform之skew

常用写法

• skewX([<angle>|<zero>])
• skewY([<angle>|<zero>])
• skew([<angle>|<zero>],[<angle>|<zero>]?)

经验

• 用的较少
• 用到时再搜skewMDN文档

5. transform多重效果

组合使用

• transform:scale(0.5)transflate(-100%,-100%)
• transform:none;取消所有

注意(transition过渡)

1. 作业

• 补充中间帧

2. 语法

• transiton:属性名 时长 过渡方式 延迟
• transition:left 200ms linear
• 可以用逗号分隔两个不同属性
• transiton:left 200ms, top 400ms
• 可以用all代表所有属性
• transition:all 200ms
• 过渡方式:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps

常用定时函数关键字

linear

此关键字表示定时函数cubic-bezier(0.0, 0.0, 1.0, 1.0)。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。

ease

此关键字表示定时函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)。 这个函数类似于 ease-in-out， 尽管它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。

ease-in

此关键字表示定时函数cubic-bezier(0.42, 0.0, 1.0, 1.0)。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。

ease-in-out

此关键字表示定时函数 cubic-bezier(0.42, 0.0, 0.58, 1.0)。使用这个定时函数，动画开始的行为类似于 ease-in 函数，动画结束时的行为类似于 ease-out函数。

ease-out

此关键字表示定时函数 cubic-bezier(0.0, 0.0, 0.58, 1.0)。动画开始很快，然后逐渐减慢，直到最终状态。

step-start

此关键字表示定时函数 steps(1, start)。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。

step-end

此关键字表示定时函数 steps(1, end)。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。

并不是所有属性都能过渡

• display:none=>block没法过渡
• 一般改成visibility:hidden=>visible
• display和visibility的区别
• background颜色可以过渡
• opacity的透明度可以过渡

过渡必须要有起始

一般只有一次动画,或者两次,比如hover和非hover状态的过渡,但是如果想要有中间点.有两种办法

1.使用两次transform

• .a===transform===>.b
• .b===transform===>.c
• 如何知道到了中间点呢?
• 用setTimeout或者监听transitionend事件

2.使用animation

• 声明关键帧
• 添加动画

如何让动画停在最后一帧

• 搜索css animation stop at end
• 加个 forwards