CSS3 के संक्रमण: * में * और के लिए अलग संक्रमण * बाहर * (या संक्रमित किया है राज्य से लौटने)

Question

मूल प्रश्न ... नीचे अद्यतन काम कर कोड:

मैं एक चित्र लोड करने के दौरान जो ऊपर आता है एक AJAX लोड घटना। छवि शरीर तत्व में "लोडिंग" कक्षा को जोड़कर या हटाकर दिखाती है/छुपाती है। वर्तमान में, लोडिंग छवि पृष्ठभूमि आकार को 0 से 100% तक एनिमेट करती है, और अस्पष्टता में फीड ('वापसी' संक्रमण के विपरीत)।

क्या मैं करना चाहते है, हालांकि, पृष्ठभूमि आकार संक्रमण तुरन्त (नहीं संक्रमण) फीका बाहर पर होने के लिए है, इसलिए है:

• फीका में: अस्पष्टता 0 से .2s में 1 को , .2s

• फीका बाहर में पृष्ठभूमि आकार 0 से 100%: 1 से .2s में 0 पर अस्पष्टता, 100% से 0 करने के लिए पृष्ठभूमि आकार होना चाहिए तुरन्त

  #loader { 
      width: 100%; 
      height: 100%; 
      position: fixed; 
      top: 0; 
      left: 0; 
      z-index: -1; 
      opacity: 0; 
      -moz-opacity: 0; 
      transition: all .2s ease-in-out 
  } 
  
  
  #loader .image { 
      width: 400px; 
      height: 138px; 
      display: block; 
      position: absolute; 
      z-index: 2000; 
      top: 50%; 
      left: 50%; 
      margin: 0; 
      background: url(assets/images/loading.png) no-repeat; 
      background-size: 0 0; 
      transition: all .2s ease-in-out; 
      -webkit-animation: pulse 400ms ease-out infinite alternate; 
      -moz-animation: pulse 400ms ease-out infinite alternate; 
      -o-animation: pulse 400ms ease-out infinite alternate; 
      animation: pulse 400ms ease-out infinite alternate 
  } 
  
  .loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)} 
  
  .loading #loader .image { 
      background-size: 100% 100%; 
      margin: -69px 0 0 -200px; 
      transition: opacity .2s ease-in-out 
  } 
  

मैंने इस चयनकर्ता .loading #loader .image के लिए "सभी" की बजाय "अस्पष्टता" के लिए संक्रमण संपत्ति बदल दी है, लेकिन यह अभी भी पृष्ठभूमि-आकार संक्रमण को निष्पादित करता है।

क्या कोई जानता है कि अलग-अलग फीका कैसे प्राप्त करें और सीएसएस 3 के ऊपर वर्णित संक्रमणों को कैसे मिटाएं? धन्यवाद!

---

अपडेट किया गया कार्य संहिता

मुद्दा अलग-अलग प्रॉपर्टी (मार्जिन, पृष्ठभूमि) को तोड़ते गया था एक अल्पविराम से अलग सूची में। मैं संक्रमण का उपयोग करने पर विश्वास करता हूं: सभी आपको और आउट संक्रमणों को अलग करने में सक्षम होने से रोकेंगे।

#loader { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    opacity: 0; 
    -moz-opacity: 0; 
    .transition(opacity,.4s); 
} 

#loader .image { 
    width: 400px; 
    height: 138px; 
    display: block; 
    position: absolute; 
    z-index: 2000; 
    top: 50%; 
    left: 50%; 
    margin: 0; 
    background: url(assets/images/loading.png) no-repeat; 
    background-size: 0 0; 

    -webkit-transition: margin .4s ease-in-out; 
    -moz-transition: margin .4s ease-in-out; 
    -o-transition: margin .4s ease-in-out; 
    -ms-transition: margin .4s ease-in-out; 
    transition: margin .4s ease-in-out; 

    -webkit-animation: pulse 400ms ease-out infinite alternate; 
    -moz-animation: pulse 400ms ease-out infinite alternate; 
    -o-animation: pulse 400ms ease-out infinite alternate; 
    animation: pulse 400ms ease-out infinite alternate 
} 

.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)} 

.loading #loader .image { 
    background-size: 100% 100%; 
    margin: -69px 0 0 -200px; 

    -webkit-transition: background .4s ease-in-out, margin .4s ease-in-out; 
    -moz-transition: background .4s ease-in-out, margin .4s ease-in-out; 
    -o-transition: background .4s ease-in-out, margin .4s ease-in-out; 
    -ms-transition: background .4s ease-in-out, margin .4s ease-in-out; 
    transition: background .4s ease-in-out, margin .4s ease-in-out; 
} 

Answer 1

यहाँ एक सरलीकृत परीक्षण का मामला है:

div {background:blue; opacity:0; transition: opacity 2s ease-in-out;} 
div.loading {opacity:1; background:red; transition: opacity 2s ease-in-out, background 1s ease-in;} 

सूचना कैसे opacity और बाहर में एक ही fades, लेकिन background केवल में fades, और तुरंत फीका बाहर पर नीला हो जाता है।

मैंने उदाहरण के रूप में :hover का उपयोग किया, लेकिन यह जावास्क्रिप्ट के साथ कक्षाओं को जोड़ने और हटाने के दौरान भी काम करना चाहिए।

Demo

यदि आप चाहें तो एक अधिक सटीक उदाहरण कृपया dabblet या Jsfiddle पर एक reduced test case प्रदान करते हैं।