Webkit-Übergang für „oben“ und „unten“ Eigenschaften

Ich mag würde, um eine CSS-Animation zu machen, wo ein div (auf einem Bildschirm zentriert mit oben und Boden Eigenschaften) erweitert durch oben Einstellung und unten bis 20px.Webkit-Übergang für „oben“ und „unten“ Eigenschaften

Ist es möglich? Wenn ich versuche, es möglich zu machen mit:

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

Animation nicht durchgeführt wird. Mache ich etwas falsch oder soll es nicht mit diesen Eigenschaften arbeiten?

P.S. Ich tue dies für eine Anwendung Titanium Desktop, so dass nur webkit matters ...

Quelle

2010-06-16 zorglub76

Können wir noch mehr Code sehen? Vielleicht weisen Sie das CSS dem falschen Selektor zu. – Kyle

Sorry, mein falsches! Ich habe übersehen, dass die erste Klasse die oberen und unteren Eigenschaften in% und die zweite in px einstellt ... Bei den gleichen Messungen funktioniert es ok ... – zorglub76

Hatte das gleiche Problem. In meinem Fall hatte der erste Zustand keine Top-Regel und der zweite hatte die Top-Regel. Hinzufügen von oben: 0px zum ersten Zustand löste das Problem. –

Hier ist ein Beispiel-Code, der auf Safari 5 Werke:

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

Quelle

2010-06-16 13:53:05

Möglicherweise möchten Sie eine CSS-Elastic-Easing-Überblendung hinzufügen http://stackoverflow.com/questions/23462515/elastic-easing-in-css3-best- approach –

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

Quelle

2010-09-25 04:59:01 user457958

Hier Code, der auf Chrome v31 funktioniert:

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

Quelle

2013-12-11 20:51:34 feco

Webkit-Übergang für „oben“ und „unten“ Eigenschaften

Antwort

Verwandte Themen