Блог

У меня есть эта скрипка, которую вы можете видеть, имеет контейнер со списком элементов box. Я хочу, чтобы элементы блока перемещались снизу вверх строка за строкой. Высота каждой строки составляет 60 пикселей.

Теперь проблема в том, что ящики добавляются в контейнер с разницей в 60 пикселей, для каждого ящика установлена скорость 100 секунд. Самый верхний блок перемещается быстрее, чем самый последний, потому что они имеют одинаковую скорость, но разные расстояния. Как я могу применить поведение, подобное очереди, здесь, предполагая, что я хочу 100% анимацию CSS3?

Я решил свою проблему с помощью некоторой базовой математики. Вот скрипка, если кому-то это нужно.