Css3transition Adding multiple transitions

This post consists of: http://xinpure.com/css3transition-to-add-multiple-transition-effects/

You can add more than one animation effect to an element by listening to an end event of an animation

Listening for animated events

-webkit-animation animations have three events: Start Event Webkitanimationstart, End Event Webkitanimationend, repeat motion event webkitanimationiteration

In the previous article, we demonstrated the effect of listening to an end event: CSS3 using animation to add multiple animation effects to the same element

Similarly,-webkit-transition can also hear animated events, but can only hear the end event Webkittransitionend

Instance HTML Code

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

CSS Code

#ts_div {    width: 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)")});

Effect illustration

Css3transition Adding multiple transitions