WebStarter WebStarter - 5 months ago 9
CSS Question

On hover stop animation at their respective position

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

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;
    }
Comments