Web前端开发笔记-----15BFC规范、transition过渡、transform变形、animation动画

Web前端开发笔记-----15BFC规范、transition过渡、transform变形、animation动画

---

一、BFC规范

Formatting context（格式化上下文）是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC即Blo Formatting Context（块级格式化上下文），它属于上述中的其中一种规范。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。


触发BFC
浮动元素：float除none以外的值
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、flex
overflow除了visible以外的值（hidden、auto、scroll）

---

二、transition过渡

transition-property :规定设置过渡效果的CSS属性的名称。
transition-duration :规定完成过渡效果需要多少秒或毫秒。
transition-delay :定义过渡效果何时开始。（可以延迟也可以提前，延迟数值为正）
transition-timing- function :规定速度效果的速度曲线。

注：transition标签不要加在hover中。

---

三、transform变形

translate（x，y）：位移
单一写法：
translateX（）
translateY（）
translateZ（） 3d

scale（） 缩放 值是一个比例值，正常为1，会以当前元素中心点进行缩放
scaleX（）
scaleY（）
scaleZ（） 3d

rotate（）旋转 旋转的值单位为角度 deg
rotateX（） 3d
rotateY（） 3d
rotateZ（） 和rotate是等价关系，正值按顺时针旋转，负值按逆时针旋转

skew（） 斜切 单位是角度，正值向左倾斜，负值向右倾斜
skewX（）
skewY（）

注意事项：
1.变形操作不会影响到其他元素。
2.变形操作只能添加给块元素，不能添加给内联元素。
3.复合写法，可以同时添加多个变形操作。
执行是有顺序的，先执行后面的操作，再执行前面的操作。
translate会受到rotate、scale、skew的影响
如：

transform：translate(100px,0) scale(.5);
transform：scale(.5) translate(100px,0) ;

前后效果不一样，因为tr