1.2D变形效果

设置transform属性,它的值 有:
(1)平移 translate(x,y)
translateX(x)
translateY(y)
(2)旋转 rotate(角度)
(3)缩放 scale(1.5)
(4)倾斜 skewX(角度) skewY(角度)

2.过渡效果

transaction:CSS属性 持续时间 速度曲线 延时时间

3.自定义帧动画

第一步:设置帧动画效果
@keyframes move {
/ from {
top: 0px;
}
to {
top: 200px;
background-color: lightblue;
width: 300px;
}
/
0% {
top: 10px;
background-color: #369;
}
30% {
top: 50px;
background-color: #639;
}
50% {
top: 100px;
background-color: #693;
}
80% {
top: 50px;
background-color: #639;
}
100% {
top: 0px;
background-color: #369;
}
}

第二步:设置动画启动属性
Animation:动画名称 持续时间 速度曲线 延迟时间 循环次数