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 :
<!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">
</div>
</body>
</html>