webkit-transition для свойств "top" и "bottom" - PullRequest
Новая
       26

webkit-transition для свойств "top" и "bottom"

12 голосов
/ 16 июня 2010

Я хотел бы создать анимацию CSS, в которой div (центрированный на экране с использованием свойств top и bottom ) расширяется установкой top и низ до 20 пикселей.

Возможно ли это?Когда я пытаюсь сделать это с: 

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

анимация не выполняется.Я делаю что-то не так, или это не должно работать с этими свойствами?

PS Я делаю это для настольного приложения Titanium, так что имеет значение только webkit ...

Ответы [ 3 ]

15 голосов
/ 16 июня 2010

Вот пример кода, который работает в 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>
7 голосов
/ 12 декабря 2013

Вот код, который работает на Chrome v31: 

-webkit-transition: top 0.5s, bottom 0.5s;
1 голос
/ 25 сентября 2010 
<!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>
...