0

我得到了这个 CSS3 表，但我有一点问题

我需要让它以与它进入时相同的方式出去，我的意思是当它下跌时看看它

@-moz-keyframes custom_effect {
    0% { height: 60px;}
    100% {height: 225px;}
}
@-webkit-keyframes custom_effect {
    0% {height: 60px;}
    100% {height: 225px;}
}

ul#nav-drp li:hover {
    -moz-animation-name: custom_effect;
    -moz-animation-duration: 1.0s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 4;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: custom_effect;
    -webkit-animation-duration: 1.0s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 1;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

我无法让它以与进入时相同的方式退出，我试图将 ( -webkit-animation-timing-function: ease;)替换为 ()，-webkit-transition: 1s ease-in-out;但我没有工作，您能描述一下出了什么问题吗？

4

2 回答 2

0

不确定我是否正确理解了您的问题，但是当您说“以与进入相同的方式出去”时，听起来您希望它height: 60px;在您悬停时恢复动画？如果是这样，那么关键帧动画就不可能了。一旦你将鼠标悬停在外面，动画就会停止并且元素会跳回到它的原始状态。

然而，这可以使用转换来解决。

这是一个演示，这是我的示例中的代码：

HTML

<div class="box"></div>​

CSS

.box {
    width: 100px;
    height: 60px;
    background: #005ca1;
    -webkit-transition: height 1s;
       -moz-transition: height 1s;
        -ms-transition: height 1s;
         -o-transition: height 1s;
            transition: height 1s;
}

.box:hover {
    height: 225px;
}

在这种情况下，我已将其设置height为我想要transition的持续时间为的属性，1s;并将其添加到我想要转换的元素中，这将“双向”转换高度。在这种情况下，我以简短的形式编写了转换，但为了澄清起见，长形式的代码如下所示： 

transition-property: height;
transition-duration: 1s;

也可以添加计时功能等，但在我的示例中我尽量保持简单。

希望有帮助！

于 2012-12-30T07:58:24.947 回答
0

尝试这个...

transition-timing-function:linear;

尝试将转换定时功能从简单更改为线性...

因为 'ease' 属性将有一个缓慢的开始，然后稍微快一点，最后它会再次变慢......所以你不会得到与进出相同的效果......

但是，“线性”属性从开始到结束都会产生相同的效果......

可能工作...

于 2012-12-29T23:15:53.590 回答