SOURCE

<div class='bb'></div>

.bb {
	position:relative;
    width: 400px;
    height: 200px;
    margin:40px auto 0;
    border: 1px solid black; 
  background: gainsboro;
  font-family: FontAwesome !important;
}

.bb::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: FontAwesome;
  font-family: FontAwesome !important;
    content: '↓';
    z-index: 11;
    margin: -10px;
    background: red;
    width: 5px;
    height: 5px;
    animation: clipMe 8s linear infinite;
}


@keyframes clipMe {
    0%,99% {
        top: 0px; left: 0px;
    }
    1% {
      transform: rotate(0deg);
    }

    15% {
      transform: rotate(0deg);
    }
    16.7% {
        top: 215px; left: 0px;
    }
    18% {
      transform: rotate(-90deg);
    }
    49% {
      transform: rotate(-90deg);
    }    
    50.1% {
       top: 215px; left: 415px;
    }
    51% {
      transform: rotate(-180deg);
    }
    65% {
      transform: rotate(-180deg);
    }
    66.6% {
       top: 0px; left: 415px; 
    }
    68% {
      transform: rotate(-270deg);
    }

    99% {
      transform: rotate(-270deg);
    }
}