CSS Transition not working when input in Javascript -

i read every thread , tried every possible solution , don't know missing!

i have div video_container_dc fade in when call in javascript.

the css:

#video_container_dc {     position: absolute;     width: 350px;     height: 198px;     top: 0px;     left: 376px;     opacity: 0;     /*visibility:hidden;*/     /*display:none;*/ } #video_container_dc.expandingvid {     -webkit-transition: 2s ease-out 1s;     -moz-transition: 2s ease-out 1s;     -o-transition: 2s ease-out 1s;     -ms-transition: 2s ease-out 1s;     transition: 2s ease-out 1s;     opacity:1;     /*visibility:visible;*/     /*display:block;*/ } 

the javascript:

var expand_content; var vidcontainer; var expandtweens = [];  function expand_transition() {     expandtweens = [];     expand_content.classname = 'expanding';     vidcontainer.classname = 'expandingvid'; }  inits = function () {     expand_content = document.getelementbyid('expand_content_dc');     vidcontainer = document.getelementbyid('video_container_dc'); } 

i tried tween function no avail:

//vidcontainer = document.getelementbyid('video_container_dc'); //document.getelementbyid( 'video_container_dc' ).classname += 'expandingvid'; //vidcontainer.classname += "expandingvid";  //vidcontainer.css("opacity", 0); //vidcontainer.offset(); //vidcontainer.css("transition", "opacity 1000ms ease-out").css("opacity", 1); 

the html:
first run inits(); in html then:

<div id="video_container_dc">     <video id="video_dc" >         <source id="video_1_mp4_src_dc" type="video/mp4"/>     </video> </div> 

it looks it's possible dom elements not exist on page @ time you're calling expand_transition. should make sure script waits run until page loaded, potentially using like:

window.addeventlistener('load', function() {     // code here }, false); 

if you're doing this, if expand_transition function runs on page load, browser coalescing dom changes. feature provided browsers can make number of changes @ once, , appear on page in single repaint.

instead of calling expand_transition directly, consider trying instead (from onload handler):

settimeout(expand_transition, 0); 

the artificial delay enough convince browser want apply layout changes before executing transition function.