JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
     <div id="box1"></div>

</div>

CSS

#container {
    width:800px;
    height:800px;
    
}
#box1 {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    background:#F00;
    display:block;
    -moz-transition: translate 5s ease-in-out, rotate 3s ease-in-out, opacity 2s ease-in-out;
    
}

#container:hover #box1 {
    -moz-transform: rotate(70deg) translate(500px,0);
    -moz-opacity: 0.17;
    opacity: 0.17;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=17);


}