2D转换（变换）transform
2d转换是改变标签在2维平面上的位置和形状的一种技术，
移动 translate
2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位
1.给元素添加 转换属性 transform
2.属性值为 translate(x,y) 如 transform:translate(50px,50px);
div{ transform: translate(50px,50px); } // 可以使用百分比 类似定位，不会影响到其他元素的位置 对行内标签没有效果
2d旋转 rotate
1.给元素添加转换属性 transform
2.属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度
div{ transform: rotate(0deg); } 旋转后跟单位deg
转换中心 transform-origin
1。transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
2.transform-origin:top left; 左上角 和 transform-origin：0 0;相同
3.transform-origin:50px 50px; 距离左上角 50px 50px 的位置
4.transform-origin：0; 只写一个值的时候 第二个值默认为 50%;
2d缩放 scale
1.给元素添加转换属性 transform
2.转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3)
div{ transform:scale(2,3); }
1.transform:scale(1,1) 放大一倍 相对于没有放大
2.transform:scale(2,2) 宽和高都放大了2倍
3.transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
4.transform:scale(0.5,0.5) 缩小
5.transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解
动画 animation
语法1
1.动画名
设置要使用的动画名 animation-name:xxx;
2.持续时间
设置动画播放的持续时间 animation-duration:3s
3.速度曲线
和设置过渡的速度曲线一样 animation-timing-function:linear;
linear： 匀速
ease： 慢-快-慢 默认值
ease-in： 慢-快。
ease-out： 快-慢。
ease-in-out： 慢-快-慢。
4.延迟时间
animation-delay: 0s;
5.循环次数
设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环
6.循环方向
animation-direction
如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为
normal 默认值 红 -> 黑
reverse 反向运行 黑 -> 红
alternate 正-反-正... 红 -> 黑 -> 红...
alternate-reverse 反-正-反.. 黑 -> 红 -> 黑 ...
以上与循环次数有关
7.动画等待或者结束的状态
animation-fill-mode 设置动画在等待或者结束的时候的状态
forwards：动画结束后，元素样式停留在 100% 的样式
backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式
both： 同时设置了 forwards和backwards两个属性值
8.暂停和播放
animation-play-state 控制 播放 还是 暂停
running 播放 paused 暂停
复合写法
animation: name duration timing-function delay iteration-count direction fill-mode;
多个动画写法
animation: name duration timing-function delay iteration-count direction fill-mode， animation: name duration timing-function delay iteration-count direction fill-mode;
用逗号分隔
动画结束事件animationend
var div = document.querySelector("div");
div.addEventListener("animationend", function () {
console.log("div的动画结束之后，触发");
})
