webkit-transition for “top” and “bottom” propertie

2020-03-01 07:53发布

站内问答 / HTML/CSS
1575 3 6

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

3条回答
姐就是有狂的资本
2楼-- · 2020-03-01 08:06

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">&nbsp;</div>

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
3楼-- · 2020-03-01 08:21 
<!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>
查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
4楼-- · 2020-03-01 08:22

Here's some code that works on Chrome v31: 

-webkit-transition: top 0.5s, bottom 0.5s;
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)