CSS “顶部”和“底部”属性的 webkit-transition
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3053552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
webkit-transition for "top" and "bottom" properties
提问by zorglub76
I'd like to make a css animation where a div (centered on a screen using topand bottomproperties) expands by setting topand bottomto 20px.
我想制作一个 css 动画，其中一个 div（使用顶部和底部属性以屏幕为中心）通过将顶部和底部设置为 20px 来扩展。
Is it possible? When I try to make it happen with:
是否可以？当我尝试通过以下方式实现时：
-webkit-transition-property: top, bottom; -webkit-transition-duration: 0.5s;
-webkit-transition-property: top, bottom; -webkit-transition-duration: 0.5s;
animation is not performed. Am I doing something wrong, or is it not supposed to work with these properties?
不执行动画。我做错了什么，还是不应该使用这些属性？
P.S. I'm doing this for a Titanium desktop application, so only webkit matters...
PS 我正在为 Titanium 桌面应用程序执行此操作，因此只有 webkit 重要...
回答by Samuel De Backer
Here is a example code that works on safari 5 :
这是一个适用于 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"> </div>回答by feco
Here's some code that works on Chrome v31:
下面是一些适用于 Chrome v31 的代码：
-webkit-transition: top 0.5s, bottom 0.5s;
回答by user457958
<!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>
