Basic CSS animation with JS timeout

Explaining how can you replace jquery animate with CSS, and instead of callback using a setTimeout function.

by Abra Cadabra

HTML

<div id="main">
    <div id="sec">
        Text
    </div>
</div>

<button id="reb">
    Click Me!
</button>

CSS

#main{
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px solid black;
}

#sec{
    position: absolute;
    width: 50px;
    height: 50px;
    background: yellow;
    top: 0;
    left: 0;
    -webkit-transition: all 2s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 2s ease-out;  /* Firefox 4-15 */
       -o-transition: all 2s ease-out;  /* Opera 10.50–12.00 */
          transition: all 2s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

#sec.modifier{
    -webkit-transform: rotateY(180deg);  -webkit-transform-style: preserve-3d;
     -moz-transform: rotateY(180deg);     -moz-transform-style: preserve-3d;
      -ms-transform: rotateY(180deg);      -ms-transform-style: preserve-3d;
          transform: rotateY(180deg);          transform-style: preserve-3d;
}

JavaScript

$("#reb").on('click', function(e){
    e.preventDefault();
    $("#sec").addClass('modifier');
    
    setTimeout(function(){
        alert('Alertu pacii');
    }, 1500);
})