I've run into a bizarre anomaly with CSS transitions. The transition is pletely ignored on load; but if I open up Chrome Dev Tools and navigate the DOM tree to #popup > div > img and select it, then click on the main image, the transition bees functional, and remains so even if Dev Tools is closed.

My suspicion is that I've made some weird mistake that I can't see. But when opening Dev Tools to try to probe my CSS makes it suddenly start working, it's a bit hard to debug!

Tested on Chrome 66.0.3359.139. The behaviour is the same in Codepen and as a stand-alone HTML file.

My intention is for clicking on the small image to show a larger one. With the popup visible, clicking anywhere will dismiss that popup. Both showing and dismissing the popup should transition smoothly; for this demo, that's an opacity change followed by a change to the image's top (making it scroll in from above the screen). The popup is controlled by setting a class on the HTML element.

document.getElementById("clickme").onclick = function(ev) {
  document.documentElement.classList.add("show-modal");
  ev.stopPropagation();
}
document.documentElement.onclick = function() {
  this.classList.remove("show-modal");
}

#clickme {
  max-height: 300px;
  cursor: pointer;
  margin: 20px;
  border: 1px solid #ddd;
  border-radius: .25rem;
  padding: 10px;
}

#popup {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0px;
  z-index: 2000;
  padding-top: 30px;
  display: none;
}

.show-modal #popup {
  display: block;
}

#popup img {
  display: block;
  margin: auto;
  position: relative;
  top: -500px;
  opacity: 0;
  transition: top .5s 1s, opacity .25s;
}

.show-modal #popup img {
  top: 0px;
  opacity: 1;
}

#popup>div {
  margin: auto;
}

<p><img id=clickme src=".png"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, ipsum at porttitor condimentum, turpis ex porta erat, et laoreet purus dui a quam. Vestibulum eget consequat neque, in faucibus turpis. Interdum et malesuada fames ac ante ipsum primis
  in faucibus. Praesent interdum sit amet odio eu consequat. Aliquam eget scelerisque odio. Suspendisse potenti. Aenean at risus a dolor facilisis dignissim. Sed et volutpat eros. Nam eget imperdiet lacus. Mauris imperdiet rutrum efficitur.</p>
<div id="popup">
  <div><img src=".png"></div>
</div>

I've run into a bizarre anomaly with CSS transitions. The transition is pletely ignored on load; but if I open up Chrome Dev Tools and navigate the DOM tree to #popup > div > img and select it, then click on the main image, the transition bees functional, and remains so even if Dev Tools is closed.

My suspicion is that I've made some weird mistake that I can't see. But when opening Dev Tools to try to probe my CSS makes it suddenly start working, it's a bit hard to debug!

Tested on Chrome 66.0.3359.139. The behaviour is the same in Codepen and as a stand-alone HTML file.

My intention is for clicking on the small image to show a larger one. With the popup visible, clicking anywhere will dismiss that popup. Both showing and dismissing the popup should transition smoothly; for this demo, that's an opacity change followed by a change to the image's top (making it scroll in from above the screen). The popup is controlled by setting a class on the HTML element.

document.getElementById("clickme").onclick = function(ev) {
  document.documentElement.classList.add("show-modal");
  ev.stopPropagation();
}
document.documentElement.onclick = function() {
  this.classList.remove("show-modal");
}

#clickme {
  max-height: 300px;
  cursor: pointer;
  margin: 20px;
  border: 1px solid #ddd;
  border-radius: .25rem;
  padding: 10px;
}

#popup {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0px;
  z-index: 2000;
  padding-top: 30px;
  display: none;
}

.show-modal #popup {
  display: block;
}

#popup img {
  display: block;
  margin: auto;
  position: relative;
  top: -500px;
  opacity: 0;
  transition: top .5s 1s, opacity .25s;
}

.show-modal #popup img {
  top: 0px;
  opacity: 1;
}

#popup>div {
  margin: auto;
}

<p><img id=clickme src="http://devicatoutlet./img/birthday.png"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, ipsum at porttitor condimentum, turpis ex porta erat, et laoreet purus dui a quam. Vestibulum eget consequat neque, in faucibus turpis. Interdum et malesuada fames ac ante ipsum primis
  in faucibus. Praesent interdum sit amet odio eu consequat. Aliquam eget scelerisque odio. Suspendisse potenti. Aenean at risus a dolor facilisis dignissim. Sed et volutpat eros. Nam eget imperdiet lacus. Mauris imperdiet rutrum efficitur.</p>
<div id="popup">
  <div><img src="http://devicatoutlet./img/birthday.png"></div>
</div>

View on CodePen

• javascript
• css
• css-transitions

Share Improve this question Follow edited Jun 7, 2019 at 7:55 showdev 29.3k3737 gold badges5959 silver badges7979 bronze badges asked May 10, 2018 at 3:37 rosuavrosuav 47644 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

CSS can't animate between display: none; and display: block; (of the #popup element). I changed to visibility for #popup.

You can see the new code here: https://codepen.io/anon/pen/KRoPwM. Hope this helps.