css 转换和翻译错误

Question

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

我的页脚在悬停时应该上升，在 "mouse-out" 上应该回到他的位置，但是如果我出去，将鼠标放在上升后的位置，页脚会自动移动没有平滑效果...

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

这是相同的代码：

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>

Answer 1

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

transition: 0.5s ease;

查看更新 fiddle；

css 转换和翻译错误

css transition and translate bug

html

css

transition

translate