CSS3动画进阶：tranform与keyframes 组合动画

场景

原型链接：
https://qiniu-static.moyuvedio.com/video/magicBox.MP4
公司最近有个盲盒活动，要求h5链接上需要放个盲盒动画，实际可以使用gif或json代替，但为了想挑战下自己，又想减轻小姐姐的设计任务，这次活动的动画决定全用原生H5支持

技术分析

此次动画涉及：移动、渐变、漂浮、旋转，基本上都是属于一些常规的动画，并没有涉及到细节动画，所以用原生肯定是没有问题的，唯一的一个难点就在于不同动画间需要衔接，而且要衔接得很自然
技术考虑：CSS3之 animate、transform、keyframes

原型拆解

这里只讲几个具有代表性的动画实现

盒盖子

旋转+向上移动
Tips: 多个transform动画组合用空格隔开（当然如果你想要通过改变旋转中心来实现也行，用 transform-origin 属性）

@keyframes capMove {
  0% {
    transform: translateX(0) rotate(-21deg);
  }
  100% {
    transform: translateX(8vw) translateY(-5vw) rotate(10deg);
  }
}

礼物球飞出后原地上下浮动

移动+渐变
**Tips:**多个@keyframes动画组合，使用addEventListener监听animationend
封装了个监听页面指定元素动画的方法

linkLeafing(dom) {
      let target = this.$refs[dom]
      target.addEventListener('animationend', function () {
      	// 添加类名区别添加动画效果
        let name = target.className
        let durTime = 0
        if (name == 'ball1') {
          durTime = 3500
        } else if (name == 'ball2') {
          durTime = 3000
        } else {
          durTime = 2800
        }
		
		// js原生animate方法
		// 第一个参数是填写动画的变化效果，只不过没有百分比，第二个参数指定持续时间、动画模式对象
        target.animate(
          [
            {
              transform: 'translateY(0)',
            },
            {
              transform: 'translateY(1.5vw)',
            },
            {
              transform: 'translateY(0)',
            },
          ],
          {
            duration: durTime,
            iterations: Infinity,
          }
        )
      })
    }

其他

1、animate动画停在最后一帧
属性最后添加 forwards

animation: ball1Move 1.5s forwards;

2、其他动画的执行顺序可以使用定时器控制