एक ही समय में कई सीएसएस एनिमेशन खेलें

Question

मैं दो सीएसएस एनिमेशन अलग-अलग गति से कैसे खेल सकता हूं ?

• छवि को एक ही समय में घूमना और बढ़ना चाहिए।
• रोटेशन हर 2 सेकंड में चक्र होगा।
• वृद्धि हर 4 सेकंड में चक्र करेगी।

उदाहरण कोड:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite;
    -webkit-animation:scale 4s linear infinite;
}

@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

http://jsfiddle.net/Ugc5g/3388/ - केवल एक एनीमेशन (पिछले एक घोषित) नाटक।

Comments

घूमते समय क्या छवि का पैमाना होना चाहिए? मैंने जो उत्तर प्रदान किया है, वह नहीं है, लेकिन अगर आपको इसकी आवश्यकता है, तो ऐसा करने के लिए इसे फिर से शुरू किया जा सकता है

— राम जी अथरेया

Answer 1

टी एल; डॉ

अल्पविराम के साथ, आप नीचे दिए गए क्रिटिकलएयर उत्तर में बताए गए प्रत्येक गुण को अपने स्वयं के गुणों के साथ निर्दिष्ट कर सकते हैं।

उदाहरण:

animation: rotate 1s, spin 3s;

मूल उत्तर

यहां दो समस्याएं हैं:

# 1

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

दूसरी पंक्ति पहले वाले को बदल देती है। तो, कोई प्रभाव नहीं है।

# 2

दोनों keyframes एक ही संपत्ति पर लागू होते हैं transform

एक विकल्प के रूप में आप छवि को <div>प्रत्येक में अलग-अलग और अलग- अलग गति से लपेट सकते हैं ।

http://jsfiddle.net/rnrlabs/x9cu53hp/

.scaler {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    animation: scale 4s infinite linear;    
}

.spinner {
    position: relative;
    top: 150px;
    animation: spin 2s infinite linear;
}


@keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>

Answer 2

यदि कोई नया साथ आ रहा है और इस थ्रेड को पकड़ रहा है, तो आप कई ऐनिमेशन निर्दिष्ट कर सकते हैं - प्रत्येक अपने गुणों के साथ - एक अल्पविराम के साथ।

उदाहरण:

animation: rotate 1s, spin 3s;

Comments

धन्यवाद, यह एक बहुत सरल उपाय है

— सर्गेई रोटबार्ट

नरक हाँ अल्पविराम!

— ज़ाचरी दहन

विभिन्न एनीमेशन देरी के बारे में क्या?

— छोटे छोटे आदमी

Answer 3

आप वास्तव में एक साथ कई एनिमेशन चला सकते हैं, लेकिन आपके उदाहरण में दो समस्याएं हैं। सबसे पहले, आप जो सिंटैक्स का उपयोग करते हैं वह केवल एक एनीमेशन निर्दिष्ट करता है। दूसरी शैली का नियम पहले को छिपाता है। आप इस तरह से वाक्य रचना का उपयोग कर दो एनिमेशन निर्दिष्ट कर सकते हैं:

-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s

जैसा कि इस फिडल में (जहाँ मैंने "स्केल" को "फीका" से बदल दिया था, नीचे बताई गई अन्य समस्या के कारण ... मेरे साथ सहन करना।): http://jsfiddle.net/rwaldin/fwk5bqt6/

दूसरा, आपके दोनों एनिमेशन समान DOM तत्व की समान CSS संपत्ति (ट्रांसफॉर्मेशन) को बदल देते हैं। मुझे विश्वास नहीं होता कि आप ऐसा कर सकते हैं। आप शायद विभिन्न तत्वों, छवि और एक कंटेनर तत्व पर दो एनिमेशन निर्दिष्ट कर सकते हैं। बस इस एनिमेशन में कंटेनर में से एक एनिमेशन लागू करें: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Comments

यह निर्दिष्ट करने के लिए धन्यवाद कि अल्पविराम के साथ नाम अलग करने से हम कई एनिमेशन कर सकते हैं।

— जचरी दहन

Answer 4

आप दो एनिमेशन नहीं खेल सकते क्योंकि विशेषता को केवल एक बार परिभाषित किया जा सकता है। बल्कि आप पहले में दूसरा एनीमेशन शामिल क्यों नहीं करते हैं और टाइमिंग सही करने के लिए कीफ्रेम को समायोजित करते हैं?

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin-scale 4s linear infinite;
}

@-webkit-keyframes spin-scale { 
    50%{
        transform: rotate(360deg) scale(2);
    }
    100% { 
        transform: rotate(720deg) scale(1);
    } 
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Comments

उपयोगकर्ता अलग-अलग गति पर "

— asnd

यह अलग-अलग गति से होता है, 2 सेकंड में रोटेट होता है, जबकि स्केल 4 सेकंड में होता है क्योंकि दो एनीमेशन स्टेटमेंट लिखने से काम नहीं होता है मैंने कीफ्रेम के जरिए टाइमिंग का ध्यान रखा है।

— राम जी अथरेया

हालांकि यह सही है कि आप एक ही समय में दो ट्रांसफ़ॉर्मेशन एनिमेशन नहीं चला सकते हैं (क्योंकि एक ट्रांसफ़ॉर्म दूसरे को अधिलेखित कर देगा), यह कहना सही नहीं है "आप दो एनिमेशन नहीं खेल सकते क्योंकि विशेषता केवल एक बार परिभाषित की जा सकती है।" एनिमेशन के साथ अल्पविराम से अलग किए गए मानों का उपयोग करने के बारे में स्वीकृत उत्तर देखें।

— जस्टिन तादादेई Justin

Answer 5

आप कुछ इस तरह की कोशिश कर सकते हैं

माता-पिता को rotateऔर छवि को सेट करें scaleताकि समय rotateऔर scaleसमय अलग-अलग हो सकें

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 2s linear infinite;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: scale 4s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes scale {
  100% {
    transform: scale(2);
  }
}

<div>
  <img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>