<div class= "container">
   <div class= "div1" id= "one"></div>
   <div class= "div2" id= "two"></div>
   <div class= "div3" id= "three"></div>
   <div class= "div4" id= "four"></div>
   <div class= "div5" id= "five"></div>
   <div class= "div6" id= "six"></div>
   <div class= "div7" id= "seven"></div>
   <div class= "div8" id= "eight"></div>
   <div class= "div9" id= "nine"></div>
   <div class= "div10" id="ten"></div>
   <div class= "div11" id="ellevn"></div>
   <div class= "div12" id="twelve"></div>
   <div class= "div13" id="thirteen"></div>
   <div class= "div14" id="ten"></div>
   <div class= "div15" id="ellevn"></div>
   <div class= "div16" id="twelve"></div>
   <div class= "div17" id="thirteen"></div>
</div>

body{
  
}

.container {
   position: relative;
   transform: scale(0.75);
   width: 400px;
   height: 410px;
   left: -85px;
   top: -45px;
  
}


.div1 {
   width: 400px;
   height: 400px;
   margin: auto;
   background: black;
   position: absolute;
   left: 50px;
   border: 5px solid black;
}
.div2 {
   animation-name: example;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   width: 60px;
   height: 60px;
   position: absolute;
   left: 200px;
   top: 175px;
   background: white;
}

.div3 {
   animation-name: example2;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   width: 60px;
   height: 60px;
   position: absolute;
   left: 225px;
   top: 175px;
   background: white;
}

.div4 {
   animation-name: example3;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   width: 60px;
   height: 60px;
   position: absolute;
   left: 200px;
   top: 175px;
   background: white;
}

.div5 {
   animation-name: example4;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   width: 60px;
   height: 60px;
   position: absolute;
   left: 200px;
   top: 175px;
   background: white;
}



.div6 {
   animation-name: example5;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   width: 60px;
   height: 60px;
   position: absolute;
   left: 200px;
   top: 175px;
   background: white;
}

.div7 {
   animation-name: example6;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   width: 60px;
   height: 60px;
   position: absolute;
   left: 225px;
   top: 175px;
   background: white;
}

.div8 {
   animation-name: example7;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   width: 60px;
   height: 60px;
   position: absolute;
   left: 200px;
   top: 175px;
   background: white;
}

.div9 {
   animation-name: example8;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   width: 60px;
   height: 60px;
   position: absolute;
   left: 200px;
   top: 175px;
   background: white;
}


.div10 {
   animation-name: bar1;
   animation-duration: 0.5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
   width: 60px;
   height: 10px;
   top: 275px;
   left: 55px;
   position: absolute;
   background: black;
}

.div11 {
   animation-name: bar2;
   animation-duration: 0.5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
   width: 60px;
   height: 10px;
   top: 125px;
   left: 55px;
   position: absolute;
   background: orange;
}

.div12 {
   animation-name: bar3;
   animation-duration: 0.5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
   width: 60px;
   height: 10px;
   top: 35px;
   left: 150px;
   position: absolute;
   transform: rotate(90deg);
   background: orange;
}

.div13 {
   animation-name: bar4;
   animation-duration: 0.5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
   width: 60px;
   height: 10px;
   top: 35px;
   left: 305px;
   position: absolute;
   transform: rotate(90deg);
   background: orange;
}












  @keyframes example {
   0% {
      left: 395px;
      top: 175px;
      background: orange;
   }
     25% {
        background: white;
     }
   50% {
      left: 55px;
      background: white;
   }
     75% {
        background: orange;
     }
   100% {
        left: 395px;
        background: orange;
     }
}
      
@keyframes example2 {
   0% {
     top: 5px;
     background: orange;
   }
   25% {
      background: white;
   }
   50% {
     top: 345px;
      background: white;
   }
   75% {
      background: orange;
   }
   100% {
      top: 5px;
      background: orange;
   }
 }

@keyframes example3 {
   0% {
      
      top: 5px;
      left: 395px;
      background: orange;
   }
   25% {
      background: white;
   }
   50% {
      left: 55px;
      top: 345px;
      background: white;
   }
   75% {
      background: orange;
   }
   100% {
        top: 5px;
        left: 395px;
        background:  orange;
     }
}

  @keyframes example4 {
   0% {
      top: 5px;
      left: 55px;
      background: orange;
   }
     25% {
        background: white;
     }
   50% {
      left: 395px;
      top: 345px;
      background: white;
   }
     75% {
        background: orange;
     }
   100% {
        top: 5px;
        left: 55px;
        background: orange;
     }
}



  @keyframes example5 {
   0% {
      left: 55px;
      top: 175px;
      background: orange;
   }
     25% {
        background: white;
     }
   50% {
      left: 395px;
      background: white;
   }
     75% {
        background: orange;
     }
   100% {
        left: 55px;
        background: orange;
     }
}

@keyframes example6 {
   0% {
     top: 345px;
     background: orange;
   }
   25% {
      background: white;
   }
   50% {
     top: 5px;
      background: white;
   }
   75% {
      background: orange;
   }
   100% {
      top: 345px;
      background: orange;
   }
 }



@keyframes example7 {
   0% {
      
      top: 345px;
      left: 55px;
      background: orange;
   }
   25% {
      background: white;
   }
   50% {
      left: 395px;
      top: 5px;
      background: white;
   }
   75% {
      background: orange;
   }
   100% {
        top: 345px;
        left: 55px;
        background: orange;
     }
}

  @keyframes example8 {
   0% {
      top: 345px;
      left: 395px;
      background: orange;
   }
     25% {
        background: white;
     }
   50% {
      left: 55px;
      top: 5px;
      background: white;
   }
     75% {
        background: orange;
     }
   100% {
        top: 345px;
        left: 395px;
        background: orange;
     }
}



  @keyframes bar1 {
   0% {
      
      background: orange;
   }
     25% {
        background: white;
     }
   50% {
      left: 395px;
      background: white;
   }
     75% {
        background: orange;
     }
   100% {
        left: 55px;
        background: orange;
     }
}

  @keyframes bar2 {
   0% {
      left: 395px;
      background: orange;
   }
     25% {
        background: white;
     }
   50% {
      left: 55px;
      background: white;
   }
     75% {
        background: orange;
     }
   100% {
        left: 395px;
        background: orange;
     }
}


  @keyframes bar3 {
   0% {
      left: 150px;
      background: orange;
   }
     25% {
        background: white;
     }
   50% {
      top: 365px;
      background: white;
   }
     75% {
        background: orange;
     }
   100% {
        left: 150px;
        background: orange;
     }
}

  @keyframes bar4 {
   0% {
      left: 305px;
      top: 365px;;
      background: orange;
   }
     25% {
        background: white;
     }
   50% {
      top: 35px;
      background: white;
   }
     75% {
        background: orange;
     }
   100% {
        left: 305px;
        top: 365px;
        background: orange;
     }
     
     
}