web-dev-qa-db-fra.com

transition webkit pour les propriétés "top" et "bottom"

Je voudrais faire une animation CSS où une div (centrée sur un écran utilisant les propriétés haut et bas) se développe en définissant haut et - en bas à 20px.

C'est possible? Quand j'essaye d'y arriver avec:

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

l'animation n'est pas effectuée. Suis-je en train de faire quelque chose de mal ou n'est-il pas censé fonctionner avec ces propriétés?

P.S. Je fais cela pour une application de bureau Titanium, donc seul le webkit compte ...

cssanimationwebkit
12
zorglub76

Voici un exemple de code qui fonctionne sur 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>
15
Samuel De Backer

Voici un code qui fonctionne sur Chrome v31:

-webkit-transition: top 0.5s, bottom 0.5s;
7
feco
<!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>
1
user457958