Why display: none Can Break Your Animations

=> Why Your Animation Is Not Working You write this: .box { display : none ; transition : all 0.3s ease ; } And expect animation… 👉 But it disappears instantly. => The Real Problem display: none removes the element from the DOM flow. That means: 👉 No rendering 👉 No animation 👉 No transition => Why Transition Fails CSS transitions need: a starting state an ending state But with display: none : 👉 Element doesn’t exist visually So nothing animates. => The Correct Way Use opacity + visibility : .box { opacity : 0 ; visibility : hidden ; transition : all 0.3s ease ; } .box.active { opacity : 1 ; visibility : visible ; } Now animation works smoothly. => Better Animation with Transform .box { opacity : 0 ; transform : translateY ( 10px ); transition : all 0.3s ease ; } .box.active { opacity : 1 ; transform : translateY ( 0 ); } => When to Use display: none Use it only when: 👉 You don’t need animation 👉 You want to completely remove element => What Developers Often Miss Animation is not just a