0

http://jsfiddle.net/nicktheandroid/vX7CV/10/

This is a simple example, but for what I need this for, transition will not work, animation needs to be used.

When hovering the element, the animation smoothly animates the element, when hovering off of the element it snaps back to it's original settings without smoothly animating back.

Is there a way to cause it to animate back to it's settings instead of snapping back like it is?

Animate needs to be used for the :hover event, but when hovering off the element, I could use transition, if this would work, I can't get it to work though.

4

2 回答 2

0

我已经在 Google Chrome 中测试了你的版本，它对我来说很好用。还添加了 Firefox 兼容性，这对我来说也很好用。

这是我现在拥有的：

HTML：

<ul>
    </li>test</li>
</ul>

CSS：

ul {
    background-color:black;
    color:white;
    width: 100px;
    height:100px;
}
@-moz-keyframes flow-down {   
    0% {
      padding-bottom: 0%;
    }
    100% {
      padding-bottom: 30%;
    }
}
@-webkit-keyframes flow-down {   
    0% {
      padding-bottom: 0%;
    }
    100% {
      padding-bottom: 30%;
    }
}
ul:hover {
    -moz-animation-name: flow-down;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode:forwards;
    -webkit-animation-name: flow-down;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode:forwards;
}

这是 JSFiddle 版本，只是以防万一：

http://jsfiddle.net/NQ5xk/1/

希望这可以帮助。

问候

于 2012-07-12T00:58:41.000 回答
0

在 Firefox 中，如果您在动画期间更改了 'position' 或 'z-index' attr，动画将不会运行

于 2012-07-12T01:12:32.893 回答