Question

我想创建一个css动画，其中div（以使用 top 和 bottom 属性的屏幕为中心）通过设置 top 和底部到20px。

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

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

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

P.S。我正在为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;

Answer 3

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css" media="screen">
        #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;
        }
    </style>
</head>
<body>
    <div id="test">Ganesh
    </div>
</body>
</html>

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

3 个答案: