html - css3 向左滑动过渡

Question

我正在开发一个 html5 和 css3 网站，但我陷入了滑动过渡。 在这里，您可以查看当前示例，当您单击右箭头时，它会向右滑动，我正在尝试使其滑动到底部，返回箭头也应该滑动到顶部。从我在“bg”类的代码中看到的：

-moz-transition: left 1.5s ease-in-out;
-webkit-transition: left 1.5s ease-in-out;
transition: left 1.5s ease-in-out;

如果我将其更改为底部，则会产生奇怪的效果。我知道我错过了一些很容易的事情，有人可以帮我吗？

Answer 1

#test       {            
            -webkit-transition-property: top, bottom;
            -webkit-transition-duration: 0.5s;
            }


#test:hover {
            top:100px;
            bottom:100px;
            }

测试为悬停添加它。您希望它移动多少像素。