css 动画 transition 和 animation

css动画分两种

1.补间动画 用  transition   结合transform使用

transition:

transition-property  属性

transition-duration  持续时间

transition-timing-function 动效  默认值ease

transition-delay 延迟时间

例如：

transition：all  2s;

二维变换

@1.  translate 设置偏移

transform：translate（x,y）x表示x方向 y表示y方向

transform：translateX（x），参考计算的单位是元素本身

可通过这个设置元素水平，垂直居中

.demo {
  position: absolute;
  top: 50%; /* 父元素高度的一半位置 */
  left: 50%; /* 父元素宽度的一半位置 */
  transform: translate(-50%, -50%); /* 元素本身的一半宽、高 */
}

@2. scale 缩放

transform: scale(sx[, sy])

.box {
    transform: scale(1.2);
}

@3.  rotate 旋转顺时针角度

其语法为：transform: rotate(angle)。angle 表示顺时针角度。

简单示例如下：

.box {
    transform: rotate(15deg);
}

@4.  skew 逆时针旋转

其语法为：transform: skew(ax[, ay])。其中 ax 表示 x 方向的顺时针角度，ay 表示 y 方向的顺时针角度，如果 ay 没有指定值则 y 方向没有倾斜。

简单示例如下：

.box {
    transform: skew(30deg);
}

综合使用的复杂变换

.box {
    transform: translate(30px) rotate(10deg) skew(0, 5deg);
}

2.帧动画  animation