HTML
(quick & simple examples)
FADE ANIMATION #fadeA { transition: opacity 1s; } #fadeA.hide { opacity: 0; }
CLICK TO TOGGLE FADE/OPACITY <p id="fadeA">Fade</p> <button onclick="document. getElementById('fadeA').classList.toggle ('hide')">Toggle</button>
FADE ANIMATION fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; }
HOVER TO FADE <p id="fadeB">This will fade on hover.</p>
HIDE CHECKBOX #fadeC { display: none; }
USE CHECKBOX TO DRIVE FADE EFFECT <label for="fadeC">Click to fade.</label> <input type="checkbox" id="fadeC"> <p id="fadeD">This will fade.</p>
CHECKED > FADE fadeD { transition: opacity 1s; } #fadeC:checked + #fadeD { opacity: 0; }