transitionend

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
<title>javascript 0</title>
<style type="text/css">
p {
    transition:1s;
}

.changed0 {
    background-color:red;
    color:green;
    font-size:2em;
}
.changed1 {
    background-color:green;
    color:red;
    font-size:4em;
}
.changed2 {
    background-color:blue;
    color:yellow;
    font-size:8em;
}
.changed3 {
    background-color:magenta;
    color:cyan;
    font-size:2em;
}

.wow {
    background-color:red;
    padding:2em;
    color:cyan;
    font-size:10em;
    line-height:10em;
}
</style>
</head>
<body>
    <p id="one" class="changed0">lorem</p>
    <p id="two">ipsum</p>
<script>
var counter = 0;
var ourLovelyP = document.querySelector("#one");

var doSomething = function () {
    ourLovelyP.classList.remove("changed" + counter);
    counter = counter + 1;
    if (counter > 3) {
        // counter = 0;
        ourLovelyP.addEventListener("transitionend", doWowStuff, false);
    }
    document.title = "(" + counter +")";
    ourLovelyP.classList.add("changed" + counter);
};
document.addEventListener("click", doSomething, false);

var doWowStuff = function () {
    ourLovelyP.classList.remove("changed" + counter);
    ourLovelyP.classList.add("wow");
    document.title = Math.random();
    ourLovelyP.removeEventListener("transitionend", doWowStuff);
};


</script>
</body>
</html>