用于"顶部"和"底部"属性的webkit转换

Question

我想创建一个css动画,其中div(使用顶部和底部属性在屏幕上居中)通过将顶部和底部设置为20px来扩展.

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

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

动画未执行.我做错了什么,或者不应该使用这些属性？

PS我正在为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>

Answer 2

以下是适用于Chrome v31的一些代码:

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