How to loop an animation?

Question

css

In general, there is a square, along its contour it is necessary to move the arrow (changing its position in space). I did not find a way to implement everything in one keyframe, so I divided it into seven stages. Everything works fine, but the repetition of the cycle of sequential launch of the animation does not occur :(
Sharp jerks are specially provided:
codepen.io/anon/pen/KNZOdO

Answer 1

You now have 7 animations, make just one and divide it into 7 parts so that each one lasts about 14% of the time. (% may be different)
Here is an example

Answer 2

there is an easier option codepen.io/haoss/pen/ZBrrLJ