在没有这些之前动画的实现：
#demo{
width:100px;
height:100px;
border:1px solid red;
position:relative;
left:0;
}
var n = 1
var id=setInterval ( ()=>{
if(n<=200){
n=n+1
document.getElementById('demo').style.left=n+'px';
}
else{
clearInterval(id)
}
},1000/60)
现在不必在这么繁琐了！
实现动画的两种方式：
第一张：transitions（过渡，也可以说是单个动作）
第二种：animations（动画）
1.transitions
CSS transitions 可以决定哪些属性（变化时）发生动画效果，持续多久 (设置 duration) ,何时开始 (设置 delay），以及过渡方式，比如匀速地或先快后慢)。
transition: 属性名（all代表所有的属性） | 时长 | 过渡方式 | 延迟
默认：all 0 ease 0
完整写法：
transition-property: all; /* 过渡属性 */
transition-duration: 0; /* 耗时 */
transition-timing-function: ease; /* 效果，默认 ease（缓入缓出） */
transition-delay: 0; /* 延迟 */
过渡方式：
linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
linear 线性---动画会以恒定的速度从初始状态过渡到结束状态
ease 缓动----动画开始时逐步加速，中间逐渐减慢，结束时逐步加速
ease-in-out -----开始慢 中间加速 结束慢
display属性的显示与消失是无法进行过渡的，改成visibility:hidden ==> visibile可以
2.animations
CSS 中，如果按一秒24帧的画法来写代码，未免太过繁琐。所以我们把动画拆解为动作(transition)，一个动作表示从一个状态到另一个状态的变化，然后把一组动作串起来，即是 CSS 中的动画(animation)
1.声明关键帧
2.写@keyframe添加动画（使用from-to或者%写法）
语法：
animation：动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停
完整写法：
animation-name: none; /* 动画名称 */
animation-duration: 0; /* 耗时 */
animation-timing-function: ease; /* 效果，默认缓入缓出 与transition取值是一样的 */animation-delay: 0; /* 延迟 */
animation-iteration-count: 1; /* 循环次数infinite(无线循环) */animation-direction: normal; /* 正放 or 倒放reverse */
3.transform（变形）
虽然名字和 transition 有点像，但是它和动画无关，transition 是一个状态到另一个状态的变化过程，而 transform 仅仅是静止的最终状态
matrix 矩阵变换
translate 位移
scale 缩放
rotate 绕轴旋转
skew[skju:] 倾斜
perspective 透视距离（可简单理解为眼睛离屏幕的距离）？？？？-----
注意：
transform原点位于正中心 ，坐标轴写在另一篇
