On hover stop animation at their respective position

Question

I have two divs which has one circle along with one smily where innercircle1 div is rotating with given animation. What i want is when i hover on innercircle1 div it should stop but with their current transform origin position, Currently when i hover over innercircle1 div it goes to their starting point i.e. their given transform origin and stop.

   body {
        background: #000;
        color: #fff;
    }

    @keyframes circle {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes inner-circle {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-360deg);
        }
    }

    .outercircle {
        border: 1px solid red;
        border-radius: 50%;
        width: 310px;
        margin: 64px auto;
        height: 310px;
        position: Relative;
    }

    .innercircle {
        width: 100px;
        height: 100px;
        margin: 20px auto 0;
        color: orange;
        font-size: 100px;
        line-height: 1;
        animation: circle 5s linear infinite;
        transform-origin: 50% 200px;
        position: ABSOLUTE;
        top: -70px;
        left: 109px;
    }

    .innercircle1 {
        animation: inner-circle 5s linear infinite;
    }

 <div class="outercircle"><div class="innercircle"><div class="innercircle1">☻</div></div></div>

Answer 1

You can pause animation using JQUERY as well as CSS.

A very simple solution to use animation-play-state property. Try these lines:

    .innercircle1 {
        animation: inner-circle 5s linear infinite;
        animation-play-state: play;
    }
   .innercircle1:hover{
        animation-play-state: paused;
    }