css 转换和翻译错误答案

【问题标题】：css transition and translate bugcss 转换和翻译错误
【发布时间】：2015-12-21 02:25:34
【问题描述】：

我正在开发一个网站，我有一个错误，如fiddle 所示。

我的页脚，在悬停时，应该向上，并且在“鼠标移出”时应该回到他的位置，但是如果我出去，然后将鼠标放在上升后的位置，页脚会自动上升而没有平滑效果...

我无法用其他更简单的方式来解释这一点，所以如果有人理解并知道如何提供帮助，我真的很感激！

这是相同的代码：

html, body{
    height: 100%;
}
.x{
    width:100%;
    min-height: 100%;
    background-color: #000;
    color: #FFF;
}
.y{
    background-color: #ABC;
    width: 100%;
    text-align: left;
    position: fixed;
    bottom:-50px;
    height: 100px;
    -webkit-transition: 1s ease-in;
    -moz-transition: 1s ease-in;
    -ms-transition: 1s ease-in;
    -o-transition: 1s ease-in;
    transition: 1s ease-in;
}
.y:hover{
    -webkit-transition: ease;
    -moz-transition: ease;
    -ms-transition: ease;
    -o-transition: ease;
    transition: ease;
    -webkit-transform: translate(0px,-100px);
    -moz-transform: translate(0px,-100px);
    -ms-transform: translate(0px,-100px);
    -o-transform: translate(0px,-100px);
    transform: translate(0px,-100px);
}

<body>
    <div class="x"> x
    </div>
    <div class="y"> y
    </div>
</body>

【问题讨论】：

你能把实际的代码贴在这里吗？（也可以链接到小提琴。）如果没有此处的代码，将来当该小提琴被更改或删除时，这个问题将不再有意义。
抱歉，从未发布过小提琴：P

标签： html css transition translate

【解决方案1】：

您需要为悬停时的过渡添加计时值

transition: 0.5s ease;

查看更新的fiddle；

【讨论】：

天哪，谢谢，我想我试过了，或者类似的方法，但没有达到这个结果......谢谢！