This one:

The next sentence should be hidden at first. <span class="fragment highlight-red">But when it is revealed, it should be highlighted.</span>

isn’t hidden at first.

This one is closer:

The next sentence should be hidden at first. <span class="fragment"><span class="highlight-red">But when it is revealed, it should be highlighted.</span></span>

It is hidden at first, but when it is revealed, it is black, and required another click to turn red.

Is there a better way?