过渡和2d

一、过渡的概念：让div从一个状态圆滑的改变到另一个状态，形成简单的动画效果

单一属性：

1.过渡的css属性：transition-property 值：css属性，css属性

2.过渡时长：transition-duration 值：数字s

3.设置速度方式：transition-timing-function

①ease减速（比较快）

②linear匀速

③ease-in加速

④ease-out减速

⑤ease-in-out 先加速后减速

⑥贝塞尔曲线（http://web.chacuo.net/css3beziertool ）

⑦步骤 steps（步骤数量）

4.设置延迟时间

transition-delay 值：数字s

复合写法

transition: css属性 时长 速度方式 延迟时间

注意事项

将过渡效果添加到哪个元素上，哪个元素需要有过渡就给哪个加

hover只能在移入时触发，原本的样式加，不管移入还是移出都能生效

复合写法，注意两个秒数的顺序

二、2d的概念：在平面内让div进行移动、缩放、旋转

语法：属性transform

值：平移、缩放、旋转

平移：translateX（x轴移动的距离）正值向右，负值向左

translateY（y轴移动的距离）正值向下，负值向上

translate（x轴，y轴）

缩放：scaleX（x轴缩放的倍数）、scaleY（y轴缩放的倍数）、scale（x轴的倍数，y轴的倍数）

旋转：rotateX（围绕x轴旋转的角度，单位是deg）rotateY（y轴旋转的角度）rotate（围绕盒子中心点旋转的角度）

背面是否可见backface-visibility:hidden 不可见

设置旋转的圆心 transform-origin：圆心的x 圆心的y