CODEWITHSUNDEEP
cssanimation
RCNeil
RCNeil

Reputation: 8759

Pause an infinite CSS3 animation on hover and use transform

Is it possible to run an animation infinitely on an element, but pause that animation and have another CSS3 transition/transform occur?

<div class="shake"></div>

For example, I have an animation -

@-keyframes undulate {
  0%        {  transform: translate(0,0); }
  5%        {  transform: translate(0px,-10px); }
  10%   {  transform: translate(0,0);}
  15%       {  transform: translate(0px,-10px); }
  20%   {  transform: translate(0,0);}
  100%  {  transform: translate(0,0);}
}

And the div I am running it on:

.shake {
   display:block; position:absolute;
   z-index:1000; 
   bottom:100px; left:50%;
   margin-left:-40px;
   width:80px; height:82px;
   background: #336699;
   cursor:pointer;

   -webkit-animation:undulate 3s linear 0s infinite;
   animation:undulate 3s linear 0s infinite;
}

.shake:hover {
   -webkit-animation-play-state:paused;
   animation-play-state:paused; 
   transform: translate(0px,3px);
   -ms-transform:translate(0px,3px);
   -webkit-transform:translate(0px,3px);    
}

So, what I am attempting to accomplish is pause the animation undulate and then run the transform effect on :hover state. Once the :hover state is over, I would like it to return to the original indefinite animation.

http://jsfiddle.net/3R92G/ - DEMO

Upvotes: 1

Views: 4021

Answers (1)

Nelson Menezes
Nelson Menezes

Reputation: 2094

Instead of setting animation-play-state, just remove the animation during the hover:

.shake:hover {
    -webkit-animation: none;
    animation: none;    
}

Setting the same property via an animation and a normal rule seems to conflict.

http://jsfiddle.net/3R92G/2/

Upvotes: 2

Related Questions