.container
  .background.start
    .box
    .box
    .box
    .demo
      .box.box1 start

  .background.end
    .box
    .box
    .box
    .demo
      .box.box2 end

* 
  box-sizing: border-box
html,body
  margin: 0
  width: 100%
  height: 100%
  display: flex
  justify-content: center
  align-items: center
  
.background
  display: flex
  width: 300px
  position: relative
  .box
    width: 107px
    height: 100px
    background-color: #eee
    border: 2px dashed #666
    margin-bottom: 20px
  .box+.box
    border-left: 3px solid red
.start
  .box:nth-of-type(3)
    border-right: 3px solid red
    
.end
  .box:nth-of-type(1)
    border-left: 3px solid red
  
    
.demo
  position: absolute
  top: 0
  .box
    width: 100px
    height: 100px
    border-radius: 5px
    background-color: orange
    text-align: center
    font-size: 28px
    color: white
    line-height: 100px
  
.box1
  margin-bottom: 20px
  animation: x 5s infinite steps(3,start) 
  
.box2
  animation: x 5s infinite steps(3)
  
  
@keyframes x
  0%
    transform: translateX(0)
  100%
    transform: translate(300px)
  
  
// @keyframes x
//   0%
//     transform: translate(0px,0px)
//   20%
//     transform: translate(200px,0px)
//   40%
//     transform: translate(200px,100px)
//   60%
//     transform: translate(0px,100px)
//   80%
//     transform: translate(0px,200px)
//   100%
//     transform: translate(200,200px)