सीएसएस एनिमेटन (स्केल, घुमाने, धुंधला) को अनुकूलित करने के लिए कैसे करें

Question

निम्नलिखित HTML उदाहरण में दो चित्र होते हैं; एक पृष्ठभूमि, दूसरा एक वस्तु है। दोनों स्केल और घूर्णन का उपयोग कर एनिमेटेड हैं। पूर्ण एचडी मॉनीटर पर यह चंचल हो जाता है। जब आप फ़ायरफ़ॉक्स में प्रदर्शन को देखते हैं तो यह लगभग 20 एफपीएस हो जाता है।

सबसे पहले मैंने jQuery का उपयोग किया; प्रदर्शन में सुधार करने के लिए मैंने सीएसएस चुना, लेकिन यह अभी भी सही नहीं है। समस्या को पुन: पेश करने के लिए पूर्ण स्क्रीन पर जाएं। मैं इसे बेहतर कैसे बना सकता हूं?

.html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #121212; 
 
} 
 

 
.maincontainer { 
 
    width: 100%; 
 
    padding-bottom: 100%; 
 
    position: fixed; 
 
    overflow: hidden; 
 
} 
 

 
.bg { 
 
    background-image: url(http://wallpaper-gallery.net/images/beautiful-pictures-of-nature/beautiful-pictures-of-nature-2.jpg); 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: -99; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    background-position: top; 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.bg2 { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: -99; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    background-position: top; 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.rain { 
 
    background-image: url(https://media.giphy.com/media/OvFQrZk8b5N0Q/source.gif); 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: -1; 
 
    -webkit-filter: blur(1px); 
 
} 
 

 
.animate-bg { 
 
    -webkit-animation-name: animateBg; 
 
    animation-name: animateBg; 
 
} 
 

 
.animate { 
 
    -webkit-animation-duration: 35000; 
 
    animation-duration: 35000ms; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    -webkit-animation-timing-function: cubic-bezier(.3, 0, .7, 1); 
 
    animation-timing-function: cubic-bezier(.3, 0, .7, 1); 
 
    animation-iteration-count: infinite; 
 
} 
 

 

 
/* Zoom in Keyframes */ 
 

 
@-webkit-keyframes animateBg { 
 
    0% { 
 
    transform: scale(1) rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: scale(1.3) rotate(4deg); 
 
    } 
 
    100% { 
 
    transform: scale(1) rotate(0deg); 
 
    } 
 
} 
 

 
@keyframes animateBg { 
 
    0% { 
 
    transform: scale(1) rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: scale(1.3) rotate(4deg); 
 
    } 
 
    100% { 
 
    transform: scale(1) rotate(0deg); 
 
    } 
 
} 
 

 

 
/*End of Zoom in Keyframes */ 
 

 
.eagle { 
 
    background-image: url(http://www.pngmart.com/files/1/Flying-Eagle-PNG-Image.png); 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 900; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    background-position: top; 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.animate-eagle { 
 
    -webkit-animation-duration: 35000; 
 
    animation-duration: 35000ms; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    -webkit-animation-timing-function: cubic-bezier(.3, 0, .7, 1); 
 
    animation-timing-function: cubic-bezier(.3, 0, .7, 1); 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-name: animateeagle; 
 
    animation-name: animateeagle; 
 
} 
 

 

 
/* Zoom in Keyframes */ 
 

 
@-webkit-keyframes animateeagle { 
 
    0% { 
 
    transform: scale(0.8) rotate(0deg); 
 
    } 
 
    30% { 
 
    transform: scale(1.05) rotate(-2deg); 
 
    } 
 
    50% { 
 
    transform: scale(1.1) rotate(0deg); 
 
    } 
 
    80% { 
 
    transform: scale(1.05) rotate(2deg); 
 
    } 
 
    100% { 
 
    transform: scale(1) rotate(0deg); 
 
    } 
 
} 
 

 
@keyframes animateeagle { 
 
    0% { 
 
    transform: scale(1) rotate(0deg); 
 
    } 
 
    30% { 
 
    transform: scale(1.05) rotate(-2deg); 
 
    } 
 
    50% { 
 
    transform: scale(1.1) rotate(0deg); 
 
    } 
 
    80% { 
 
    transform: scale(1.05) rotate(2deg); 
 
    } 
 
    100% { 
 
    transform: scale(1) rotate(0deg); 
 
    } 
 
} 
 

 

 
/*End of Zoom in Keyframes */ 
 

 
.blur { 
 
    animation: blur 5000ms; 
 
} 
 

 
@keyframes blur { 
 
    0% { 
 
    -webkit-filter: blur(0px); 
 
    } 
 
    20% { 
 
    -webkit-filter: blur(3px); 
 
    } 
 
    40% { 
 
    -webkit-filter: blur(5px); 
 
    } 
 
    60% { 
 
    -webkit-filter: blur(7px); 
 
    } 
 
    80% { 
 
    -webkit-filter: blur(5px); 
 
    } 
 
    100% { 
 
    -webkit-filter: blur(0px); 
 
    } 
 
} 
 

 
@-webkit-keyframes blur { 
 
    0% { 
 
    -webkit-filter: blur(0px); 
 
    } 
 
    20% { 
 
    -webkit-filter: blur(3px); 
 
    } 
 
    40% { 
 
    -webkit-filter: blur(5px); 
 
    } 
 
    60% { 
 
    -webkit-filter: blur(7px); 
 
    } 
 
    80% { 
 
    -webkit-filter: blur(5px); 
 
    } 
 
    100% { 
 
    -webkit-filter: blur(0px); 
 
    } 
 
} 
 

 
.unblur { 
 
    animation: unblur 1000ms; 
 
} 
 

 
@keyframes unblur { 
 
    0% { 
 
    -webkit-filter: blur(5px); 
 
    } 
 
    100% { 
 
    -webkit-filter: blur(0px); 
 
    } 
 
} 
 

 
@-webkit-keyframes unblur { 
 
    0% { 
 
    -webkit-filter: blur(5px); 
 
    } 
 
    100% { 
 
    -webkit-filter: blur(0px); 
 
    } 
 
}

<div class="maincontainer"> 
 

 
    <div id="bg2" class="bg2"> 
 
    <div id="bg" class="bg animate animate-bg"> 
 
     <div class="rain"></div> 
 
     <div class="drops"></div> 
 
    </div> 
 
    </div> 
 

 
    <div id="eagle"> 
 
    <div class="eagle animate-eagle"> 
 
    </div> 
 
    </div> 
 
</div>

सुझाव डुप्लिकेट प्रश्न से संबंधित नहीं है, क्योंकि मैं नहीं दिख रहा है कि यह कैसे कैनवास के साथ हल किया जा सकता।

Answer 1

इच्छा-परिवर्तन विशेषता पर एक नज़र डालें, संभवतः इस मदद मिल सकती है कि आप इसे थोड़ा आसान है, तो आप के बारे में यह here

यह केवल बात thats सबसे बड़ी ब्राउज़र समर्थन नहीं है पढ़ सकते हैं मिलता है।

मुझे संदेह है कि बारिश पर आपका 1 पीएक्स धुंध शायद काफी गहन है, आप लगातार कुछ बदल रहे हैं। मैं बिल्कुल नहीं देख सकता कि आप .blur क्लास और संबंधित एनीमेशन का उपयोग कर रहे हैं, लेकिन यह प्रदर्शन के लिए काफी महंगा होगा।

transform: translate3d(0,0,0); रॉबर्ट मूर पता चलता है के रूप में वेबकिट में मदद करता है विशेष रूप से हार्डवेयर त्वरण का उपयोग करने के लिए, आप इस उदाहरण में, लेकिन यह here के बारे में पढ़ा के रूप में आप फिल्टर इन पहले से ही हार्डवेयर त्वरण

Answer 2

क्योंकि आप धुंधला कर रहे हैं यही कारण है कि का लाभ उठा रहे प्रयोग कर रहे हैं कर सकते हैं वास्तविक समय में एक एनिमेटेड जीआईएफ।

-webkit-filter: blur(1px); हटाएं और अंतराल समाप्त हो गया है।

मैंने rain effect with a canvas element को पुन: प्रयास करने की कोशिश की लेकिन मुझे एक ही परिणाम मिला ताकि जीआईएफ यहां समस्या न हो।

मुद्दा यह है कि फ़ायरफ़ॉक्स एनिमेटेड तत्वों पर धुंध फ़िल्टर के साथ संघर्ष कर रहा है।

(वास्तव में एक जवाब है, लेकिन एक टिप्पणी के लिए बहुत लंबा)