webkit-transition用于“top”和“bottom”属性

Question

webkit-transition用于“top”和“bottom”属性

12

我想制作一个CSS动画，在屏幕中心的div通过设置top和bottom属性，扩展到20像素。

这是否可能？当我尝试使用以下方式实现时：

-webkit-transition-property: top, bottom;
-webkit-transition-duration: 0.5s;
动画没有执行。我是做错了什么，还是这些属性不能用来实现动画？顺便说一下，我是在为一个 Titanium 桌面应用程序做这个，所以只有 WebKit 有用...

- zorglub76

我们能看到更多的代码吗？也许你将CSS赋值给了错误的选择器。 - Kyle

3

抱歉，我的错！我忽略了第一类使用百分比设置顶部和底部属性，而第二类使用像素... 使用相同的度量单位就可以正常工作... - zorglub76

1

遇到了同样的问题。在我的情况下，第一个状态没有任何顶部规则，而第二个状态有顶部规则。将 top:0px 添加到第一个状态中解决了问题。 - Ege Akpinar

3个回答

7

这是一段适用于Chrome v31的代码：

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

- feco

1

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

- user457958

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samuel De Backer · Accepted Answer

这里是一个在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>