Hide reveal.js fragments after their appearance

Question

Say I have a simple reveal.js slide like this:

  
first
  


        

Answer 1

Just to expand on dodo's answer. If you want to completely remove the element, but also want a bit of animation, you can do something like:

.fragment.current-visible.visible:not(.current-fragment) {
    animation: removed-item-animation 1s cubic-bezier(0.6, -0.05, 0.9, 0.9) forwards;
}
@keyframes removed-item-animation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        line-height: 0px;
        font-size: 0px;
        height: 0px;
        display: none;
    }
}

The above will fade out the element. You can also do something cool like:

.fragment.current-visible.visible:not(.current-fragment) {
    animation: removed-item-animation 1.5s cubic-bezier(0.6, -0.05, 0.9, 0.9) forwards;
    transform-origin: 0% 100%;
}
@keyframes removed-item-animation {
    0% {
        opacity: 1;
        transform: rotateZ(0);
    }

    100% {
        opacity: 0;
        transform: translateY(900px) rotateZ(70deg);
        line-height: 0px;
        display: none;
    }
}

This will make the item to "fall out" of the slide.