.box{
  width: 200px;
  min-height: 200px;
  background-color: bisque;
  margin-left: 100px;
  border: black 1px solid;
   /* transition: width 5s, background-color 3s,transform 4s; */
   transition:transform 5s;
} 
.box:hover{
  /* width: 400px;
  background-color: aqua; */
  transform: rotate(45deg) scale(1.5) translateX(150px);

}
@keyframes ping-pong {
  from{
    left: 0;
  }
  to{
    left: 250px;
    background-color: blue;
  }
}
.boxx{
  width: 300px;
  height: 200px;
  background-color: aqua;
  margin-top: 50px;
  border: 2px solid black;
}
.bo{
  background-color: yellow;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: relative;
  animation: ping-pong 2s ease-in-out 1s infinite alternate;
}
.child1{
  background-color: blueviolet;
}
.child{
  background-color: brown;
}
.parents{
  display: grid;
  grid-template-columns: 200px calc(100% - 200px - 20px);
  gap: 20px;
  grid-template-rows: 500px;
}