2

Possible Duplicate:
Webkit CSS Animation issue - persisting the end state of the animation?

I want to keep the position of my animated div when it finishes running. Right now I animating the div on mouse hover, but the div return back to it's position even if I'm still hovering over it.

Is there a way to let it get back only when I mouse out?

http://jsfiddle.net/neoswf/X5a64/

div{
    width:100px;height:100px;margin:1em;background:red
}
div:hover {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-transform: translateZ(0);
}
@-webkit-keyframes rotateThis {
  from { -webkit-transform:scale(1) rotate(0deg); }
  to { -webkit-transform:scale(1.1) rotate(100deg); }
}​
Community
  • 1
  • 1
neoswf
  • 4,730
  • 6
  • 39
  • 59

2 Answers2

5

You're looking for

-webkit-animation-fill-mode: forwards;

DEMO

Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
1

Use animation-fill-mode: forwards to persist the end state: 

-webkit-animation-fill-mode: forwards;

http://jsfiddle.net/stjHZ/

McGarnagle
  • 101,349
  • 31
  • 229
  • 260