As far as I understand, if I'm trying to modify the style of an element which has the transition property, the modification will be executed in a gradual way. So is there any way to listen the change of the style, prevent the immediate modification and replace it with a custom animation?
that is transion If you want change the color using css transition click more details
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}<div class="box"></div>