title: CSS make div both change color and move on hover
body: <p>I made a box on my screen and I want it to change color and move to the bottom right corner when hovered over.
  So far I have this... which only changes color. I can't figure out how to make the div slowly both change color and move to the bottom-right</p>
  
  <pre><code>.topper {
    background-color: blue;
    width: 50px;
    height: 50px
  }
  
  .topper:hover {
    background-color: red;
    -webkit-transform: translate(1400px, 800px);
    -webkit-transition: all 20s ease-in-out;
  }
  
  
  &lt;div class="topper"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SOrt of works but is there any way to make it automatically og to the right-bottom instead of me writting specific locations like 1400px/800px? I want to use ONLY css</p>