通过过渡自定义效果以相同的方式进出

Question

我得到了此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;）替换（ CC_1）但是我没有工作您能描述出什么问题吗？

Answer 1

不确定我是否正确理解您的问题，但是当您说"以同样的方式出现时，它听起来您希望它会在当您的情况下动画回到height: 60px;徘徊？如果是这样，那么Key Frame Animations将不可能。一旦悬停，动画就会停止，元素将跳回其原始状态。

但是，这是可以使用过渡来解决的。

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

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;

也可以添加正时功能等，但是我试图在示例中保持简单。

希望有帮助！

Answer 2

尝试这个...

transition-timing-function:linear;

尝试将过渡 - 定时功能从易于线性更改为线性...

因为"轻松"属性的开始速度会很慢，然后再变得更快，它将再次变得慢...所以您不会获得与进入和出门相同的效果...

但是，"线性"属性从开始到结束都具有相同的效果...

可能有效...