CSS JS

HOW TO FADE IN & OUT USING CSS JAVASCRIPT

FADE ANIMATION #fadeA { transition: opacity 1s; } #fadeA.hide { opacity: 0; }

FADE ON MOUSE CLICK

01

CLICK TO TOGGLE FADE/OPACITY <p id="fadeA">Fade</p> <button onclick="document. getElementById('fadeA').classList.toggle ('hide')">Toggle</button>

FADE ON MOUSE HOVER

02

FADE ANIMATION fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; }

HOVER TO FADE  <p id="fadeB">This will fade on hover.</p>

CSS-ONLY FADE

03

HIDE CHECKBOX #fadeC { display: none; } CHECKED > FADE  fadeD { transition: opacity 1s; } #fadeC:checked + #fadeD { opacity: 0; }

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>