html css js执行顺序,JavaScript 和 CSS 执行顺序？

transition后加过渡时间，transitionend 事件会在时间间隔后才会被触发。所以我的理解是css先加载，但是这个过渡的过程是异步的，此时绑定transitionend 事件的脚本已经执行到了。不知道我这样理解对不对，如果不对还望有人指正。

我做了一个实验：

html：

js：

function fun_transitionend(){

console.log("transition end");

}

function fun_hover(){

console.log("start event binding");

document.getElementById("transition_div").addEventListener('transitionend',fun_transitionend);

}

css：

.transition_div{

height:100px;

width:100px;

background:red;

-webkit-transition:width 5s;

-moz-transition:width  5s;

-ms-transition:width  5s;

-o-transition:width  5s;

transition:width  5s;

}

.transition_div:hover

{

width:300px;

}

图形开始过渡变换宽度的时候，事件绑定代码开始执行，变换完成后触发transitionend事件处理函数。