Moving an element on hover with CSS transitions

  
    .sun {
        position: fixed;
        background: yellow;
        width: 100px;
        height: 100px;
        top: 30px;
        left: 100px;
        border-radius: 50px;

        cursor: pointer;
      }
      
      
    /* Your sun when the mouse 'touches' it */

    .sun:hover {
        animation-name: example;
        animation-duration: 4s;
      }
      
      
      /* Your animation with only 1 keyframe */
       @keyframes example {
        100% {
          transform: translate(50px, 200px);
        }
      }