动画translate

2D转换之移动translate 1,语法 transform: translate(x, y); transform: translatex(100px); transform: translatex(50%); 因为盒子的宽度是100px; 所以这里的50%就是50px transform: translatey(n); 重点 translate最大的优点，不会影响其他元素的位置 translate中的百分比单位是相对于自身元素的translate:(50%，50%)； 对行内标签没有效果   盒子实现水平和垂直居中    translate 的 -50% 是自身高度的一半（100px） 可以代替margin   2D转换值旋转 rotate transform： rotate(度数) 重点，rotate(45deg) 角度为正 顺时针，  负 逆时针   2D转换之旋转 rotate       转换中心点 transform-origin  语法 transform-origin: x y; 重点 x y默认转换的中心点是元素的中心点 (50% 50%) 还可以给x y设置像素 或者方位词 top bottom left right center   2D转换之缩放scale 语法 transform: scale(x, y); 优势:不会影响其他盒子       分页按钮      2D转换综合写法 transform: translate() rotate() scale()，   顺序会影响转换效果   css3动画使用     css3动画常见属性 animation-timing-function: ease;  linear匀速 运动曲线 自己尝试 animation-delay： 1s;  延迟1秒开始动画 animation-iteration-count: infinite;  infinite无限次数循环播放 animation-direction: alternate;  是否反方向播放 默认normal 动画结束后的状态 默认backwards 回到起始状态， 停留结束状态 forwards animation-fill-mode: forwards; div:hover{ animation-play-state: paused;} 鼠标经过停止  默认running 动画简写属性 animation： 动画名称 持续时间 运动曲线 何时开始 播放次数  是否反方向 动画起始或结束的状态；   波纹效果