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

Firefoxでは、アニメーション中に「position」または「z-index」attrを変更すると、アニメーションは実行されません。

于 2012-07-12T01:12:32.893 に答える
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 に答える