虽然JS也可以实现动画效果，但是css实现更加细腻，内存开销更小

平面转换

1.属性一：transition(过渡)

transition可以为一个元素在不同样式之间变化添加补间动画，我们只需要定义开始状态和结束状态即可让内置自动为我们添加补间动画

• 第一个属性是可以参与过渡的属性，例如width,height,left,top,border，背景颜色和文字颜色等等所有变形（包括2D和3D变形）
• 第二个属性是动画所需要的时长，单位是s。
• 第三个属性是动画速度变化曲线：linear（匀速）,ease-in（速度从小到大，即淡入）,ease-out（速度从大到小，即淡出）,ease-in-out（开始时速度从小到大，结束时速度从大到小）

2.属性二：transform(平面转化)

（1）translate:平移，单位是px

translate:translate(10px,30px); 括号里前者是水平移动的距离，后者是垂直移动的距离。

（2）rotate:旋转

若rotate的取值为正数，那么rotate表示顺时针旋转，如果rotate的取值为复数，那么rotate表示逆时针旋转，旋转圆点默认为要旋转的盒子的正中心。

动画animation

动画需要使用关键字@keyframes来定义

动画使用也很方便，只需要一行代码

• 属性一规定了需要绑定到选择器的keyframes的名称，即要绑定哪个动画函数。
• 属性二规定了动画完成所要花费的时间，以秒为单位计数
• 属性三规定了动画的速度曲线，此属性与transition的一样
• 属性四规定了动画开始之前延迟多久，以秒为单位。
• 属性五规定了该动画播放的次数，如果没写，默认只播放一次。
• 属性六规定了动画是否应该轮流反向播放。