实现向右移动动画
如果我们想要一个按钮，控制一个div向右移动的动画效果，该怎么实现呢？
有三种实现的方法，下面我们分别介绍三种方法
1.通过设定left
实现思路：通过改变left实现div的右移
实现案例请点击：https://jsbin.com/leduqolugi/edit?html,js,output
JS核心代码：
function startMove(){
var n =0;
var timer = setInterval(() => {
if(n<=30){
box.style.left = n/100*300 +'px';
n++;
}else{
clearInterval(timer);
}
},100);
}
2.通过transform + transition
实现思路：使用transform属性里的translateX来完成移动，并且使用transition的过渡效果。
实现案例请点击：https://jsbin.com/tujigujemi/edit?html,css,js,output
CSS代码：
#box{
width:100px;
height:100px;
background:red;
transition:all 2s;
}
#box.move{
transform:translateX(100px);
}
CSS核心代码有两行：
1.transition:all 2s; 让整个移动在2s内完成，transition的作用是给我开头和结尾，我来补充中间帧。
2.transform:translateX(100px);实现右移100px。
JS代码：
function startMove(){
box.classList.add('move')
}
3.使用animation
实现案例请点击：https://jsbin.com/xefawusuku/edit?html,css,js,output
animation的核心就是定义关键帧， 其中move是这个动画的名字。
@keyframes move{
0%{
transform:translateX(0px);
}
100%{
transform:translateX(100px)
}
}
然后，写一个move类，指定让move运行2s。
#box.move{
animation:move 2s;
}
然后，JS添加上这个类。
start.addEventListener('click',()=>{
box.classList.add('move');
})
关于transition的总结
有些属性不能用transition，比如display:block变成display:none
当我们想做的动画效果是想让一个显示的div消失，可以有两种方法：
1.用Opacity，最开始设置opacity:1，点击按钮后设置opacity:0
但是，opacity后，这个元素仍然占有相应的空间，所以还应该用JS去掉这个元素，可以用的事件是transitionend
实现案例请点击：https://jsbin.com/tesusotira/edit?html,css,js,output
start.addEventListener('click',()=>{
box.classList.add('end');
});
box.addEventListener('transitionend',()=>{
box.remove();
});
2.还可以改用visibility:visible 改为 hidden
总结：可以用opacity : 1 -> 0 或者 visibility: visible -> hidden 替代 display: block -> none
关于animation的总结
1.animation组成部分：
<1>关键帧keyframes
<2>animation属性，animation: 动画名称(必需),执行一次所需时间(必需),动画在开始前的延迟时间，动画的运行速度轨迹(linear:匀速，默认ease:低速-加速-低速)，动画的播放次数(infinite:无限循环)
2.稍微复杂一点的动画
实现案例请点击：https://jsbin.com/fetudazucu/edit?html,js,output
实现效果如下：
代码如下：
注意：animation-play-state 和 animationPlayState的书写方式
实现一颗跳动的爱心
实现案例请点击：https://jsbin.com/sivunicowa/edit?html,css,output