पृष्ठ के निचले हिस्से से एक निश्चित स्थिति तत्व को शीर्ष पर स्लाइड करने के लिए मैं सीएसएस एनिमेशन का उपयोग कैसे करूं?

Question

http://jsfiddle.net/cD4Gr/1/

यह मेरी एनीमेशन कोड है:

@-webkit-keyframes silde_to_top { 
    0% { 
     bottom: 0%; 
     top: default; 
    } 
    100% { 
     bottom: default; 
     top: 0%; 
     z-index: 1000000; 
     opacity: 0.5; 
    } 
} 

#test{ 
    -webkit-animation-name: silde_to_top; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-direction: normal; 
    -webkit-animation-delay: 0; 
    -webkit-animation-play-state: running; 
    -webkit-animation-fill-mode: forwards; 
} 

वर्तमान में, div सिर्फ शीर्ष पर बजाय शीर्ष पर फिसलने का स्वत: शुरू होता है,। एनिमेट करने वाली एकमात्र चीज अस्पष्टता है।

Answer 1

यह प्रतिशत मान से डिफ़ॉल्ट/ऑटो मान (या इसके विपरीत) तक एनिमेट नहीं कर सकता है। इस कोड को यह काम करने के लिए हो जाता है, यद्यपि यह शुरू होता है गुप्त: http://jsfiddle.net/blineberry/cD4Gr/2/

:

@-webkit-keyframes silde_to_top { 
    0% { 
    top: 100%; 
    } 
    100% { 
    top: 0%; 
    z-index: 1000000; 
    opacity: 0.5; 
    } 
} 

यहाँ अपने बेला उदाहरण है