1.直接上代码

<template>
<div>
  <div class="main-box">
    <div class="g-of-h">
      <div class="g-f-l box-l animated"></div>
      <div class="g-f-l box-r animated"></div>
    </div>
    <div class="box-b animated"></div>
  </div>
</div>
</template>

<script>
export default {
  name: "animate"
}
</script>

<style scoped>
.g-of-h{
  overflow: hidden;
}
.g-f-l{
  float: left;
}
.g-f-r{
  float: right;
}
.main-box{
  width: 1200px;
  margin: 0 auto;
}
.box-l{
  width: 200px;
  height: 200px;
  background-color: #8a6de9;
  animation-name: fadeLeftIn;
  -webkit-animation-name: fadeLeftIn;
}
.box-r{
  margin-left: 20px;
  width: 500px;
  height: 200px;
  background-color: #FDB9B9;
  animation-name: fadeRightIn;
  -webkit-animation-name: fadeRightIn;
}
.box-b{
  width: 720px;
  height: 200px;
  animation-name: fadeBottomIn;
  -webkit-animation-name: fadeBottomIn;
  background-color: #888888;
  margin-top: 20px;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@keyframes fadeLeftIn {
  0%{
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  100%{
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeRightIn {
  0%{
    opacity: 0;
    transform: translate3d(100%,0,0);
  }
  100%{
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeBottomIn {
  0%{
    opacity: 0;
    transform: translate3d(0,100%,0);
    -webkit-transform: translate3d(0,100%,0);
  }
  100%{
    opacity: 1;
    transform: none;
    -webkit-transform: none;
  }
}
</style>