How to execute a callback when a CSS animation is closed?

The event to use is transitionend , the

let square = document.querySelector("#square");
square.addEventListener('transitionend', function (event) {
     console.log("Terminou:", event.propertyName);
});

#square{
   background-color: tomato;
   height: 100px;
   width: 100px;
   font-weight: bold;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
   transition: background-color .2s linear, color 1s ease-out;
}


#square:hover {
    background-color: white;
    color: tomato;

}

<div id="square">
   SQUARE
</div>

However it is important to note that for each effect that will be animated, in your case it is color and background-color two events transitionend will be triggered.

Another very important thing to note is that if you take the mouse out of the element it will do the inverse animation, which is still an animation and therefore will also trigger the event, see as the example with long times :

let square = document.querySelector("#square");
square.addEventListener('transitionend', function (event) {
     console.log("Terminou:", event.propertyName);
});

#square{
   background-color: tomato;
   height: 100px;
   width: 100px;
   font-weight: bold;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
   transition: background-color 2s linear, color 3s ease-out;
}


#square:hover {
    background-color: white;
    color: tomato;

}

<div id="square">
   SQUARE
</div>

The event transitioncancel

There is event transitioncancel that is able to check if the animation / transition was canceled midway

  

It only works on Firefox 53+, other browsers are not supported

As an example:

let square = document.querySelector("#square");
square.addEventListener('transitionend', function (event) {
     console.log("Terminou:", event.propertyName);
});
square.addEventListener('transitioncancel', function (event) {
     console.log("Cancelado:", event.propertyName);
});

#square{
   background-color: tomato;
   height: 100px;
   width: 100px;
   font-weight: bold;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
   transition: background-color 2s linear, color 3s ease-out;
}


#square:hover {
    background-color: white;
    color: tomato;

}

<div id="square">
   SQUARE
</div>

Retro-compatibility

For older browsers transitionend is only supported with prefixes, if you need backwards compatibility then you can use the following events:

• .addEventListener('webkitTransitionEnd') : before Chrome 36 and WebKit 7.0.6 (Safari and Android)
• .addEventListener('oTransitionEnd') : Implemented in Opera 10.5
• .addEventListener('otransitionend') (in small): Implemented in Opera 12.0 (opera passed without prefix on 12.10)

For you who just want raw javascript:

// Determinando o elemento 
var e = document.getElementsByID('#square')[0];

// Checando o evento 
function checkTransicao(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
};


// Criando o evento 
var transitEvent = checkTransicao();

transitEvent && e.addEventListener(transitEvent, function() {
    //aqui é o callback


});

For those who use JQUERY: I believe that you can always get the end of the animation like this:

    $('#square').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
    function(e) {
    // execução do código pós término

  });

Or you can capture the event once just like this:

    $('#square').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
    function(e) {
    // execução do código pós término

  });

You choose ...;)