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.