.ferris-wheel{
  margin-left: 20%;
  position: relative;
  -webkit-animation:circleRoate 50s infinite linear ;
  .circle{
    position: absolute;
    z-index: 99;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    -webkit-animation:animtrans 50s infinite linear ;
    &.rotate-paused{
      -webkit-animation-play-state:paused;
      animation-play-state:paused;
    }
    &.rotate-running{
      -webkit-animation-play-state:running;
      animation-play-state:running;
    }
  }
  @-webkit-keyframes circleRoate{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
  }
  @-webkit-keyframes animtrans {
    from {
      transform: rotateZ(360deg);
    }
    to {
      transform: rotateZ(0deg);
    }
  }
  &.rotate-paused{
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
  }
  &.rotate-running{
    -webkit-animation-play-state:running;
    animation-play-state:running;
  }
}