<div class='parent'>
  <div class='child'></div>
</div>
.parent {
  width: 400px;
  height: 400px;
  background-color: blue;
}
.child {
  width: 50%;
  height: 50%;
  background-color: red;
  transition: transform 3s ease-in-out 3s;
  */transition: transform 3s linear 3s;*/
  */transition: transform 3s cubic-bezier(0.7,0.4,0.66,1.71) 3s; this we get in code inspect*/
}
.parent:hover .child {
  background-color: green;
  transform: translateX(100%);
}