मैं एक साधारण विस्तार बार एनीमेशन उत्पन्न करने की कोशिश कर रहा हूं। सब कुछ खोज काम करता है और मैं इसे अपनी पसंद के अनुसार नियंत्रित करता हूं, सिवाय इसके कि border-radius जो scaleX() परिवर्तन से प्रभावित होता है। क्या इस प्रभाव से बचने का कोई तरीका है?

मुझे लगता है कि border-radius के लिए एक निरपेक्ष इकाई का उपयोग करना पर्याप्त होगा, लेकिन ऐसा नहीं है। scaleX() अब भी इसे प्रभावित करता है।

महत्वपूर्ण नोट:

मैं width संपत्ति के साथ काम करने के बजाय scaleX() का उपयोग करना चाहता हूं क्योंकि जिन तत्वों पर मैं काम कर रहा हूं वे विभिन्न बदलती चौड़ाई के साथ आते हैं और मैं उन सभी के साथ काम करने के लिए केवल एक एनीमेशन रखना चाहता हूं।

div {
  width: 200px;
  height: 20px;
  background-color: pink;
  border-radius: 10px;
  animation: expand;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes expand {
  from {
    transform: scaleX(0.1);
  }
  to {
    transform: scaleX(1);
  }
}
<div />
3
aviya.developer 16 जिंदा 2020, 17:44

1 उत्तर

सबसे बढ़िया उत्तर

मैं चौड़ाई संपत्ति के साथ काम करने के बजाय स्केलएक्स() का उपयोग करना चाहता हूं क्योंकि जिन तत्वों पर मैं काम कर रहा हूं वे विभिन्न बदलती चौड़ाई के साथ आते हैं और मैं उन सभी के साथ काम करने के लिए केवल एक एनीमेशन रखना चाहता हूं।

to निर्दिष्ट न करें और आपका एनीमेशन किसी भी चौड़ाई के साथ काम करेगा:

.bar {
  width: 200px;
  height: 20px;
  background-color: pink;
  border-radius: 10px;
  animation: expand;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes expand {
  from {
    width:20px;
  }
}
<div class="bar"></div>

<div class="bar" style="width:100px"></div>
<div class="bar" style="width:40px"></div>
4
Temani Afif 16 जिंदा 2020, 15:36