css - "top"和 "bottom"属性的 webkit-transition

Question

我想制作一个 css 动画，其中一个 div(使用 top 和 bottom 属性在屏幕上居中)通过设置 top 和 bottom 到 20px。

这可能吗？当我尝试通过以下方式实现它时:

-webkit-transition-property: top, bottom;
-webkit-transition-duration: 0.5s;

不执行动画。我做错了什么，或者它不应该使用这些属性？

附言我正在为 Titanium 桌面应用程序执行此操作，因此只有 webkit 很重要...

Answer 1

这是一个适用于 safari 5 的示例代码:

#test{
  background:#3F3;
  position: absolute;
  top:50px;
  bottom:50px;
  width:200px;
  -webkit-transition-property: top, bottom;
  -webkit-transition-duration: 0.5s;
}
#test:hover {
  top:100px;
  bottom:100px;
}

<div id="test">&nbsp;</div>