Title: CSS first transition doesn’t work
Last modified: September 26, 2020

---

# CSS first transition doesn’t work

 *  [antonop4u](https://wordpress.org/support/users/antonop4u/)
 * (@antonop4u)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/css-first-transition-doesnt-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)

 *  [mark l chaves](https://wordpress.org/support/users/mlchaves/)
 * (@mlchaves)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/css-first-transition-doesnt-work/#post-13456722)
 * Hi [@antonop4u](https://wordpress.org/support/users/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](https://codepen.io/marklchaves/pen/gOrEXXR?editors=1111).
 * Shout if you have any questions.
 * Thanks!
 *  Thread Starter [antonop4u](https://wordpress.org/support/users/antonop4u/)
 * (@antonop4u)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/css-first-transition-doesnt-work/#post-13457092)
 * Thank you very much for your answer.
 *  [mark l chaves](https://wordpress.org/support/users/mlchaves/)
 * (@mlchaves)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/css-first-transition-doesnt-work/#post-13457641)
 * My pleasure [@antonop4u](https://wordpress.org/support/users/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.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [first time](https://wordpress.org/support/topic-tag/first-time/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [not working](https://wordpress.org/support/topic-tag/not-working/)
 * [transition](https://wordpress.org/support/topic-tag/transition/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 2 participants
 * Last reply from: [mark l chaves](https://wordpress.org/support/users/mlchaves/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/css-first-transition-doesnt-work/#post-13457641)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics