Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="line1"></div>
    <div id="line2"></div>
  </body>

</html>

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    0% {left: 0px;}
    50% {left: 300px; transform: rotate(157deg);}
    100% {left: 0px;}
}

@keyframes mymove {
    0% {left: 0px;}
    50% {left: 300px; transform: rotate(157deg);}
    100% {left: 0px;}
}

body {
  position: relative;
}

#line1 {
    position:absolute;
    top: 50px;
    left: 30px;
    width: 120px;
    border-bottom: 1px solid black;
    -webkit-transform: rotate(57deg); /* Chrome, Safari, Opera */
    transform: rotate(57deg);
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 3s infinite;
}

#line2 {
  position:absolute;
  top: 50px;
  left: 30px;
  width: 120px;
  border-bottom: 1px solid black;
  -webkit-transform: rotate(-57deg); /* Chrome, Safari, Opera */
  transform: rotate(-57deg);
  -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
  animation: mymove 3s infinite;
}