CSS first transition doesn’t work

  • Hi, I’m not sure what I’m doing wrong, I Would like to open a popup window with a half-second transition, and it works fine except for the first time.

    here is the CSS code:

    
#popup-win{
	display: none;
	opacity: 0;
	position: absolute;
	width: auto;
	height: auto;
	max-width: 300px;	
	background: #ffffff;
	border: 1px solid #cccccc;
	padding: 10px ;
	overflow: hidden;
	z-index: 10;
	-webkit-box-shadow: 0px 0px 7px -1px rgba(8,74,124,1);
	-moz-box-shadow: 0px 0px 7px -1px rgba(8,74,124,1);
	box-shadow: 0px 0px 7px -1px rgba(8,74,124,1);
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

    and here is the Javascript code:

    

var button = document.quesrySelector('#button');
var win =  document.quesrySelector('#popup-win');

button.addEventListener('click', function(){
	win.style.display = 'block';
	win.style.opacity = '1';
});

    does anyone have any idea why?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @antonop4u,

    Not exactly sure what the issue is. Instead of trying to debug your code, I modified it to use a CSS keyframes at rule for the transition.

    For example, I assigned this class to your popup-win.

    
/* Fade in Once for Three Seconds */
.fade-in-1 {
  animation: 3s 1 fadeIn; /* Do the Fade. */
}

    Which in turns uses this at rule.

    
/* The fading in part. Reused above. */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

    Full code and live demo on CodePen.

    Shout if you have any questions.

    Thanks!

    Thread Starter antonop4u

    (@antonop4u)

    Thank you very much for your answer.

    My pleasure @antonop4u ??

    Take care!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS first transition doesn’t work’ is closed to new replies.