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