Hide reveal.js fragments after their appearance

The current-visible class is what you're looking for, see the doc on fragments: https://github.com/hakimel/reveal.js/#fragments

For a demonstration of this class, see the general reveal.js demo: http://lab.hakim.se/reveal-js/#/20/1

If you want to completely remove the space taken by the hidden element after it was shown, you can use the following CSS selector and properties:

.fragment.current-visible.visible:not(.current-fragment) {
    display: none;
    height:0px;
    line-height: 0px;
    font-size: 0px;
}

Additionally if you don't want this behavior for other current-visible fragments, you can just add a custom class to your selector and HTML elements.

One could also use this solution :

.reveal .slides section .fragment {
    opacity: 0;
    display: none; }
.reveal .slides section .fragment.current-fragment {
    opacity: 1;
    display: inline; }