CSS3Transition添加多个过渡效果

本篇文章由：http://xinpure.com/css3transition-to-add-multiple-transition-effects/

通过监听动画的结束事件，可以为一个元素添加多个动画效果

监听动画事件

-webkit-animation 动画有三个事件：开始事件 webkitAnimationStart；结束事件 webkitAnimationEnd；重复运动事件 webkitAnimationIteration

在之前的一遍文章当中，演示了监听结束事件的效果: CSS3使用Animation为同一个元素添加多个动画效果

同样的, -webkit-transition 也可以监听到动画事件，但是只能监听到结束事件 webkitTransitionEnd

实例

HTML Code

<div id="ts_div"></div>

CSS Code

#ts_div {
     300px;
    height: 300px;
    margin: 100px auto 0;
    background-color: #000;
    transition: all 1s ease;
}
#ts_div:hover {
    transform: translateX(200px);
}

JS Code

var ts_div = document.getElementById("ts_div");
$("#ts_div").bind("webkitTransitionEnd", function() {
    ts_div.css("transform: translateX(-400px)")
});

效果示图

CSS3Transition添加多个过渡效果