.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); } }