वेबकिट-संक्रमण "टॉप" के लिए और "नीचे" गुण

मैं एक सीएसएस एनीमेशन जहां एक div (एक स्क्रीन शीर्ष और नीचे गुण का उपयोग करने पर केंद्रित) करना चाहते हैं शीर्ष और की स्थापना द्वारा फैलता है नीचे से 20px।वेबकिट-संक्रमण "टॉप" के लिए और "नीचे" गुण

क्या यह संभव है? जब मैं बनाने की कोशिश यह हो साथ:

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

एनीमेशन नहीं किया जाता है। क्या मैं कुछ गलत कर रहा हूं, या क्या इन गुणों के साथ काम नहीं करना चाहिए?

पीएस मैं एक टाइटेनियम डेस्कटॉप अनुप्रयोग के लिए यह कर रही है, इसलिए केवल वेबकिट मामलों ...

स्रोत

2010-06-16 zorglub76

हम कुछ और कोड देख सकते हैं? शायद आप गलत चयनकर्ता को सीएसएस असाइन कर रहे हैं। – Kyle

क्षमा करें, मेरी गलती! मैंने देखा है कि प्रथम श्रेणी% में शीर्ष और नीचे गुण सेट करती है, और दूसरा पीएक्स में ... उसी माप के साथ यह ठीक काम करता है ... – zorglub76

एक ही समस्या थी। मेरे मामले में, पहले राज्य में कोई शीर्ष नियम नहीं था और दूसरे राज्य के शीर्ष नियम थे। शीर्ष जोड़ना: पहले राज्य में 0px समस्या हल हो गई। –

यहाँ एक उदाहरण कोड है कि सफारी 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>

स्रोत

2010-06-16 13:53:05

आप एक सीएसएस लोचदार easing संक्रमण जोड़ना चाहते हैं 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>

स्रोत

2010-09-25 04:59:01 user457958

यहाँ कुछ कोड है कि क्रोम v31 पर काम करता है:

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

स्रोत

2013-12-11 20:51:34 feco

वेबकिट-संक्रमण "टॉप" के लिए और "नीचे" गुण

उत्तर

संबंधित मुद्दे