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”);
})
