JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ejemplo"></div>

CSS

.ejemplo {

    /* 1- Aplicar el estilo básico al elemento.*/
    background: #0BF; 
    padding: 20px; 
    width: 100px; 
    height:100px; 
    margin: 10px; 
    cursor: pointer; 
    position:absolute;
    
    /* 2- Especificar la propiedad de cambio con transition-property.*/ 
    transition-property: left; 
    -moz-transition-property:  left; 
    -webkit-transition-property: left; 
    -o-transition-property: left; 
    
    /* 3- especificar la propiedad de duracion de la animacion con transition-duration.*/
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    -moz-transition-duration: 1s; 
    -o-transition-duration: 1s; 
} 

/*4- Especificar un valor de cambio a la propiedad seleccionada.*/ 
.ejemplo:hover { 
    left: 50%;
    background: #A00; /*NO ocurira una transición con esta declaración*/
}