By moving the cursor over the cube, the 'hover' event triggers the animation by calling a function, in this case rotating the cube 180 degrees, and then back to 0. If you remove the cursor off the cube while the animation occurs, the cube jumps back to original position.
Transitions operate slightly differently, the transition is assigned to the element, also identifying the properties and the length of time. When the 'hover' event is called, the transition is executed on the properties to the updated values, in this case rotating to 180 degrees. Removing the cursor, the transition is automatically called again returning the properties to their original value.