Dark Mode Toggle Animation using CSS

 

DEMO

HTML

<div class="contianer">

<div class="sun sun-logo">

<i class="fas fa-sun"></i>

</div>

<div class="moon moon-logo">

<i class="fas fa-moon"></i>

</div>

</div>

CSS

.container{

position: relative;

}

.sun, .moon{

font-size: 10rem;

width: fit-content;

height: fit-content;

}

.moon{

position: absolute;

inset: 0;

}

.moon-logo{

opacity: 0;

transform: translateY(20%) rotate(50deg);

}

.sun-logo{

opacity: 1;

transform: translateY(0) rotate(0deg);

}

.animate-sun{

opacity: 0;

transform: translateY(20%) rotate(100deg);

}

.animate-moon{

opacity: 1;

transform: translateY(0%) rotate(0deg);

color: aliceblue;

}

.moon-logo{

opacity: 0;

transform: translateY(20%) rotate(50deg);

transition: all 1s ease-out;

}

.sun-logo{

opacity: 1;

transform: translateY(0) rotate(0deg);

transition: all 1s ease-out;

}

.dark{

background-color: black;

}

JS

document.querySelector(".container").assEventLostner("click", () => {

document.querySelector(".sun-logo").classList.toggle("animate-sun");

document.querySelector(".moon-logo").classList.toggle("animate-moon");

document.querySelector("body").classList.toggle("dark");

})