动画
动画 https://developers.google.cn/web/fundamentals/design-and-ux/animations/
element.classList 来进行css 动画
transitionend 事件，可以侦听元素css事件更 animationend 类似。
使用 JavaScript 和 Web Animations API 编写动画
MDN上的文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API
<style>
.box {
width: 120px;
height: 120px;
background: #f48;
}
</style>
<div class="box"></div>
<script>
var target = document.querySelector('.box');
var player = target.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 100px)'}
],
{delay: 500,duration: 500,easing: 'ease-in-out'});
player.addEventListener('finish', function() {
target.style.transform = 'translate(100px, 100px)';
});
</script>
will-change: transform; 硬件加速， 可以去 mdn 看下具体资料
选择合适的动画持续时间 https://developers.google.cn/web/fundamentals/design-and-ux/animations/choosing-the-right-easing
缓出：约 200 毫秒 - 500 毫秒。这让眼睛有机会看到动画，但不会觉得卡顿。
缓入：约 200 毫秒 - 500 毫秒。请记住，它在结尾将晃动，没有时间量变化将缓和这种影响。
弹跳或弹性效果：约 800 毫秒 - 1200 毫秒。您需要留出时间让弹性或弹跳效果“停下”。若没有这点额外时间，动画的弹性跳动部分看上去比较有攻击性，让人感觉不舒服。
