How to have a fragment to both fade-in and highlight-red?

This one isn't hidden at first:

The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. <span class="fragment highlight-red">But as you can see, it isn't hidden at all.</span>

<link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/theme/simple.min.css" rel="stylesheet" />

<div class="reveal"><div class="slides"><section>
The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. <span class="fragment highlight-red">But as you can see, it isn't hidden at all.</span>
</section></div></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<script>Reveal.initialize();</script>

This one is closer. It is hidden at first, but when it is revealed, it is black, and requires another click to turn red:

The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. <span class="fragment"><span class="fragment highlight-red">But as you can see, when it reveals it isn't highlighted right away.</span></span>

<link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/theme/simple.min.css" rel="stylesheet" />

<div class="reveal"><div class="slides"><section>
The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. <span class="fragment"><span class="fragment highlight-red">But as you can see, when it reveals it isn't highlighted right away.</span></span>
</section></div></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<script>Reveal.initialize();</script>

Is there a way to achieve what I want as described by the text in the demo?

Solution

The default behavior of fragments is to fade in, by means of animating the opacity CSS property. Classes like highlight-red also affect the opacity property (setting it to 1), which is why you don't get the desired behavior when applying both the fragment and highlight-red classes.

Using nested fragments, as seems to be your intent in your second snippet, causes them to be applied sequentially, as described here.

To get the behavior you want, it seems that the simplest way is to define a custom fragment:

.fragment.red {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/theme/simple.min.css" rel="stylesheet" />

<div class="reveal">
  <div class="slides">
    <section>
      The next sentence should be hidden at first.
      <span class="fragment custom red">
         But when it is revealed, it should be highlighted.
      </span>
    </section>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<script>
  Reveal.initialize();
</script>