webkit-transition for "top" and "bottom" properties
I'd like to make a css animation where a div (centered on a screen using top and bottom properties) expands by setting top and bottom to 20px.
Is it possible? When I try to make it happen with:
-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...
Here is a example code that works on 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>Here's some code that works on Chrome v31:
-webkit-transition: top 0.5s, bottom 0.5s;
<!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>
加载中,请稍侯......
精彩评论