Я не знаю синтаксис PHP. На Javascript это работает так jsfiddle.net/petroveg/agwtd8vz
Если вы не можете перевести простые циклы с Javascript, зачем ставить такой тэг?
Между каждым?)) Нет, конечно. Просто раздвинуть символы по ширине строки (text-align:justify) возможно, если только есть строка с максимальной шириной. Вот такую строку с помощью :after мы и поставили. В в первой строке все элементы с display:inline-block раскиданы по ширине контейнера.
А уже внутри этих блоков могут находиться наборы элементов с обычными расстояниями между собой.
Суть вопроса была в отделении кнопки от блока с прижатием вправо.
Я не понимаю — вы показываете картинку с одной кнопкой, а код с двумя. Зачем вторая кнопка «Войти»? Где эта ситуация на макете?
И да — положение фигуры относительно точки движения я компенсирую отрицательным margin.
Ну а про несколько @keyframe не понял — обновите пример. Они те же, но я поставил компенсацию трансформации для 3-х блоков и каждому задал свою задержку.
И да — я же координаты относительно центра задал. То есть я полагаю, что координаты должны задаваться центру фигуры.
Относительно которого также компенсируется поворот (transform-origin).
