Com a animação de fadeOut, você precisa alterar a classe que o elemento HTML está atribuído, de fadeIn para fadeOut. Para isso, você pode usar javascript.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function mudarClasse() {
        document.getElementById("fade").className = "fade-out"
    }

<!-- language: lang-css -->

    #fade { transition: 2s; }
    .fade-out { opacity: 0; }
    .fade-in { opacity: 1; }



<!-- language: lang-html -->

    <p id='fade' class='fade-in'>Texto</p>

    <button onClick='mudarClasse()'>FadeOut</button>

<!-- end snippet -->

Basta alterar de acordo com seu código, criar uma nova animação para o fade-out, etc.