CSS3 animation、transform

1、animation 动画

举例：

animation: test 1s ease 2s infinite ;

第一个参数是 动画的名字这里命名为test，与 @keyframes 搭配使用
第二个参数是 动画的持续时间
第三个参数是 动画的过渡类型 这里的ease是平滑过渡
第四个参数是 动画的延迟时间
第五个参数是 动画的循环次数 这里表示无限循环
还可以设置第六个参数 表示是否反向运动

 @keyframes test {
            0%{
                width: 100px;
            }
            50%{
                width: 600px;
            }
            100%{
                width: 100px;
            }
        }
        
 @keyframes test {
	from
	等效于 0%.
	to
	等效于 100%.
}

2、transform 变换

当想让div变形状时（可以是2d的，也可以是3d的），就可以用这个属性。
比如，
transform: translate(10px,10px);----你想让这个div向右平移10像素，向下也平移10像素，

transform: rotate(90deg);-----你想让这个div旋转一下，默认会按照几何中心顺时针旋转

常用参数：