“top”和“bottom”属性的webkit-transition答案

【问题标题】：webkit-transition for "top" and "bottom" properties“top”和“bottom”属性的webkit-transition
【发布时间】：2011-03-04 11:18:43
【问题描述】：

我想制作一个 CSS 动画，其中一个 div（使用 top 和 bottom 属性在屏幕上居中）通过设置 top展开> 和底部到 20 像素。

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

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

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

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

【问题讨论】：

我们可以再看一些代码吗？也许您将 CSS 分配给了错误的选择器。
对不起，我错了！我已经看到第一个类以 % 为单位设置 top 和 bottom 属性，第二个以 px 为单位...使用相同的测量值，它可以正常工作...
遇到了同样的问题。就我而言，第一个州没有任何最高规则，第二个州有最高规则。将 top:0px 添加到第一个状态解决了这个问题。

标签： css animation webkit

【解决方案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;
}

&lt;div id="test"&gt;&amp;nbsp;&lt;/div&gt;

【讨论】：

您可能需要添加 CSS 弹性缓动过渡 stackoverflow.com/questions/23462515/…

【解决方案2】：

<!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>

【讨论】：

【解决方案3】：

下面是一些适用于 Chrome v31 的代码：

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

【讨论】：