css animation 动画属性

    <div class="center">
      <div class="dunpai">dunpai</div>
      <div class="his1">his1</div>
      <div class="his2">his2</div>
      <div class="his3">his3</div>
      <div class="car">car</div>
      <div class="clock">clock</div>
    </div>

.dunpai {
  position: absolute;
  height: 400px;
  width: 300px;
  border: 1px solid #ffffff;
  top: 12px;
  left: 45px;
  animation-name: dunpai1;
  animation-direction: alternate;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

@keyframes dunpai1 {
  0% {
    left: -85px;
  }
  100% {
    left: 85px;
  }
}

.his1 {
  position: absolute;
  height: 400px;
  width: 300px;
  border: 1px solid #ffffff;
  animation-name: his11;
  animation-direction: alternate;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  top: 400px;

}


@keyframes his11 {
  0% {
    transform: rotate(0.2turn);
  }
  100% {
    transform: rotate(0.9turn);
  }
}

.his2 {
  position: absolute;
  height: 400px;
  width: 300px;
  border: 1px solid #ffffff;
  top: 480px;
  animation-name: his12;
  animation-direction: alternate;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes his12 {
  0% {
    top: 480px;
  }
  100% {
    top: 680px;
  }
}

.his3 {
  position: absolute;
  height: 400px;
  width: 300px;
  border: 1px solid #ffffff;
  top: 480px;
  left: 99px;
  animation-name: his12;
  animation-direction: alternate;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}

.car {
  position: absolute;
  height: 400px;
  width: 300px;
  top: 480px;
    left: 120px;
  border: 1px solid #ffffff;
  animation-name: car1;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}


@keyframes car1 {
  0% {
    top: 0px;
    left: 480px;
    transform: rotate(1turn);
  }

  25% {
    top: 480px;
    left: 120px;
    transform: rotate(1turn);
  }

  50% {
    top: 480px;
    left: 120px;
    transform: rotate(0.5turn);
  }

  75% {
    top: 0px;
    left: 480px;
    transform: rotate(0.5turn);
  }

  100% {
    top: 0px;
    left: 480px;
    transform: rotate(1turn);
  }
}


.clock {
  position: absolute;
  height: 400px;
  width: 300px;
  border: 1px solid #ffffff;
  animation-name: clock1;
  animation-duration: 7200s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes clock1 {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}