HTML\CSS/JS Помогите плиз.

Я все испробывал но не получаеться ((((((((!!
Код вот: (в сокращении)

| | | |
| | | |
| | | |
| | | |

Я хочу что б это было анемираванно и как на "ресунке" с права c верху.
Код анимации я написал все работает, но. .
.. Когда начал разтоволять эти "линии" возникла проблемма ои все в стают в 1 линию вот так
|
|
|
|
|
|
|
И я перепробывал и span, p, div, h1-h7,но все без успешно. (
Пробывал через сss менять положение тоже не работает.
Подскажите пожалуйста. эхэхэх
(Сори за орфографию сложно соридоточиться на ошибках)