CSS动态效果总结

## CSS动态效果总结

### 过渡：transition
transition的中文含义是过渡，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

transition的属性

transition-property: all; 如果希望所有的属性都发生过渡，就使用all。

transition-duration: 1s; 过渡的持续时间。

transition-timing-function: linear; 运动曲线。属性值可以是：

linear 线性

ease 减速

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

transition-delay: 1s; 过渡延迟。

以上可以用简写形式

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;

transition-property这个属性可以设置过度的部分；比如它的值去width时，就是高度不变，宽度过渡变化。一般选all，整个一起变化。

### 平面2D转换

#### 缩放scale（x,y）;

x表示水平方向缩放倍数；y表示竖直方向的缩放倍数，若只写一个值就表示整体的缩放倍数

注意：在给2D元素设置缩放倍数时，并不会将它的兄弟元素挤走。

#### 位移：translate

transform: translate(水平位移, 垂直位移);

注意：