h5 animation 旋转动画

<template>
  <div id="wrapper">
    <div class="aaa"></div>
    <div class="bbb"></div>
    <div class="ccc"></div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
#wrapper {
  margin: 0 auto;
  height: 500px;
  width: 1000px;
  position: relative;
  // background: blue;
  .aaa {
    height: 300px;
    width: 300px;
    background: red;
    position: absolute;
    left: 350px;
    top: 100px;
    z-index: 10;
    transition: height 2s, width 2s，left 2s, top 2s, z-index 2s;
    animation: myfirstaaa 20s;
    animation-iteration-count: infinite;
  }
  .bbb {
    height: 200px;
    width: 200px;
    background: yellow;
    position: absolute;
    left: 0px;
    top: 50px;
    transition: height 2s, width 2s，left 2s, top 2s, z-index 2s;
    animation: myfirstbbb 20s;
    animation-iteration-count: infinite;
  }
}
.ccc {
  height: 200px;
  width: 200px;
  background: blue;
  position: absolute;
  left: 750px;
  top: 50px;
  z-index: 0;
  transition: height 2s, width 2s，left 2s, top 2s, z-index 2s;
  animation: myfirstccc 20s;
  animation-iteration-count: infinite;
}

@keyframes myfirstaaa {
  0% {
    height: 200px;
    width: 200px;
    background: yellow;
    position: absolute;
    left: 0px;
    top: 50px;
    z-index: 0;
  }

  20% {
    height: 200px;
    width: 200px;
    background: yellow;
    position: absolute;
    left: 0px;
    top: 50px;
    z-index: 0;
  }
  40% {
    height: 200px;
    width: 200px;
    background: blue;
    position: absolute;
    left: 750px;
    top: 50px;
    z-index: 0;
  }
  60% {
    height: 200px;
    width: 200px;
    background: blue;
    position: absolute;
    left: 750px;
    top: 50px;
    z-index: 0;
  }

  80% {
    height: 300px;
    width: 300px;
    background: red;
    position: absolute;
    left: 350px;
    top: 100px;
    z-index: 10;
  }
  100% {
    height: 300px;
    width: 300px;
    background: red;
    position: absolute;
    left: 350px;
    top: 100px;
    z-index: 10;
  }
}

@keyframes myfirstbbb {
  0% {
    height: 300px;
    height: 200px;
    width: 200px;
    background: blue;
    position: absolute;
    left: 750px;
    top: 50px;
    z-index: 0;
  }

  20% {
    height: 200px;
    height: 200px;
    width: 200px;
    background: blue;
    position: absolute;
    left: 750px;
    top: 50px;
    z-index: 0;
  }
  40% {
    height: 300px;
    width: 300px;
    background: red;
    position: absolute;
    left: 350px;
    top: 100px;
    z-index: 10;
  }
  60% {
    height: 300px;
    width: 300px;
    background: red;
    position: absolute;
    left: 350px;
    top: 100px;
    z-index: 10;
  }

  80% {
    height: 200px;
    width: 200px;
    background: yellow;
    position: absolute;
    left: 0px;
    top: 50px;
    z-index: 0;
  }
  100% {
    height: 200px;
    width: 200px;
    background: yellow;
    position: absolute;
    left: 0px;
    top: 50px;
    z-index: 0;
  }
}
@keyframes myfirstccc {
  0% {
    height: 300px;
    width: 300px;
    background: red;
    position: absolute;
    left: 350px;
    top: 100px;
    z-index: 10;
  }

  20% {
    height: 300px;
    width: 300px;
    background: red;
    position: absolute;
    left: 350px;
    top: 100px;
    z-index: 10;
  }
  40% {
    height: 200px;
    width: 200px;
    background: yellow;
    position: absolute;
    left: 0px;
    top: 50px;
  }
  60% {
    height: 200px;
    width: 200px;
    background: yellow;
    position: absolute;
    left: 0px;
    top: 50px;
  }

  80% {
    height: 200px;
    width: 200px;
    background: blue;
    position: absolute;
    left: 750px;
    top: 50px;
    z-index: 0;
  }
  100% {
    height: 200px;
    width: 200px;
    background: blue;
    position: absolute;
    left: 750px;
    top: 50px;
    z-index: 0;
  }
}
</style>