I have an Unordered List with 9 List Items which highlight a number of benefits provided by a company, each with a fairly long description of the benefit, collectively they occupy quite a bit of screen depth. I want each to appear after the previous one has loaded to help focus attention to this content and give a feel of movement at this area of the web page. Currently I have set each transition to take 1.2s with increasing delays to allow for the previous ones to have shown before the next one starts loading i.e. 0.45s, 1.65s, 2.85s, 4.05s, 5.25s, 6.45s, 7.65s, 8.85s and 10.05s. This works fine if the area for all the List Items is showing in the browser. The issue is if you have not scrolled down far enough so not all the area is showing. The List Items will load that occupy the available space but not the subsequent ones, scroll down further and the delays still apply to the missing ones which can be anything up to 10.05s in this example, so there can be a long wait before anything starts to happen.

I am guessing that the answer is going to be no but is there any way to link the delay to whether the previous List Item is already visible on the page rather than treating them as a group and having to base the delays on the first one?

Any suggestions gratefully received!!