सीएसएस एनीमेशन चौड़ाई दाएं से बाएं और ऊंचाई से नीचे तक

Question

मैं दाएं से बाएं से दाएं चौड़ाई और नीचे से ऊपर तक विभिन्न कंटेनर की ऊंचाई बढ़ाने की समस्या को हल करने की कोशिश कर रहा हूं। मैं सीएसएस एनीमेशन बनाने की कोशिश कर रहा हूं जो स्क्वायर में घूमता है और यहां की सीमाओं की नकल करता है, अगर यह मदद करता है तो मेरे कोडपेन https://codepen.io/Archezi/pen/xReqvq?editors=0100 से लिंक है।

यहां मेरा HTML .container एक मुख्य रैपर है .circle एक एनीमेशन लाइन 1-लाइन 4 वर्ग की सीमाएं हैं जिन्हें मैं एनिमेट करने की कोशिश कर रहा हूं।

<div class="container"> 
    <div class="circle "></div> 
    <div class="line1 "></div> 
    <div class="line2 "></div> 
    <div class="line3 "></div> 
    <div class="line4 "></div> 
</div> 

यहाँ कृपया मुझे प्रत्यक्ष जहां समाधान खोजने या मुझे इस समस्या का अलग दृष्टिकोण बात करने के लिए मेरी सीएसएस

body { 
    margin: 0 auto; 
} 
.container { 
    position:relative; 
    margin: 50px auto; 
    width: 800px; 
    height:800px; 
    border:1px solid #000; 
} 
.circle { 
    display:inline-block; 
    width: 25px; 
    height: 25px; 
    border-radius:50%; 
    position: absolute; 
    top:100px; 
    left:100px; 
    background:#000; 
    animation: myframes 4s ease-in-out 0s infinite; 

    /* animation-name: myanimation; 
    animation-duration:5s; 
    animation-timing-function:ease-in-out; 
    animation-delay: 0s; 
    animaiton-iteration-count: infinite; 
    animation-direction: normal; 
    animation-fill-mode: forwards; 
    animation-play-state: running; */ 
} 
.line1 { 
    height:15px; 
    width:15px; 
    position:absolute; 
    top:105px; 
    left:105px; 
    background:red; 
    animation: squerframe 2s ease-in-out 0s infinite; 
} 
.line2 { 
    height:15px; 
    width:15px; 
    position:absolute; 
    top:105px; 
    left:205px; 
    background:green; 
    animation: squerframe2 2s ease-in-out 1s infinite; 
} 
.line3 { 
    height:15px; 
    width:15px; 
    position:absolute; 
    top:205px; 
    left:205px; 
    background-color:red; 
    animation: squerframe3 2s ease-in-out 2s infinite; 
} 

.line4 { 
    height:15px; 
    width:15px; 
    position:absolute; 
    top:205px; 
    left:105px; 
    background:green; 
    animation: squerframe4 2s ease-in-out 3s infinite; 
} 
@Keyframes squerframe 
{ 
    0% { width:15px; opacity: 1; } 
    50% { width:115px; } 
    100%{ width:115px; opacity: 0; } 
} 
@Keyframes squerframe2 
{ 
    0% { height:15px; opacity: 1; } 
    50% { height:115px;    } 
    100%{ height:115px; opacity: 0; } 
} 
@Keyframes squerframe3 
{ 
    0% { width:115px; opacity: 0;} 
    50% { width:115px; } 
    100%{ width:15px; opacity: 1; } 
} 
@Keyframes squerframe3 
{ 
    0% { width:15px; opacity: 1;} 
    50% { width:115px; } 
    100%{ width:115px; opacity: 0; } 
} 
@Keyframes squerframe4 
{ 
    0% { height:15px; opacity: 1;} 
    50% { height:115px; } 
    100%{ height:115px; opacity: 0; } 
} 

@keyframes myframes 
{ 
    0% { top:100px; left:100px; } 
    25% { top:100px; left:200px; } 
    50% { top:200px; left:200px; } 
    75% { top:200px; left:100px; } 
    100% { top:100px; left:100px; } 
} 

है। धन्यवाद!

Answer 1

जोड़े अतिरिक्त शैली

animation: squerframe4 2s ease-in-out 3s infinite; 
-webkit-animation: squerframe4 2s ease-in-out 3s infinite; 
-moz-animation: squerframe4 2s ease-in-out 3s infinite; 

और मुख्य-फ़्रेम

@Keyframes squerframe... 
@-webkit-Keyframes squerframe... 
@-moz-Keyframes squerframe... 

Answer 2

के लिए

समस्या यहाँ है कि आप, पंक्ति 3 के लिए की जरूरत है एक पूर्ण अधिकार है, ताकि जब चौड़ाई परिवर्तन, यह करने के लिए खिंचाव जाएगा छोडा।

इसके अलावा, लाइन 4, एक पूर्ण तल होना चाहिए ताकि यह फैल जाएगा।

मेरा सुझाव है कि आप एक कंटेनर जोड़ें या वर्तमान div.container के आयामों को बदलें (जैसा कि मैंने उदाहरण में किया है) चार लाइनों के लिए, और उस कंटेनर के चरम सीमा के रूप में 4 लाइनों का उपयोग करें।

यहाँ अपने उदाहरण को जारी रखने के लिए कैसे पर एक संदर्भ बिन्दु के रूप में संशोधित किया गया है:

https://codepen.io/anon/pen/MbRvGM?editors=0100

body { 
    margin: 0 auto; 
} 
.container { 
    position:relative; 
    margin: 50px auto; 
    width: 115px; 
    height:115px; 
    border:1px solid #000; 
} 
.circle { 
    display:inline-block; 
    width: 25px; 
    height: 25px; 
    border-radius:50%; 
    position: absolute; 
    top:0px; 
    left:0px; 
    background:#000; 
    animation: myframes 4s ease-in-out 0s infinite; 

/* animation-name: myanimation; 
    animation-duration:5s; 
    animation-timing-function:ease-in-out; 
    animation-delay: 0s; 
    animaiton-iteration-count: infinite; 
    animation-direction: normal; 
    animation-fill-mode: forwards; 
    animation-play-state: running; */ 



} 
.line1 { 
    height:15px; 
    width:15px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background:red; 
    animation: squerframe 2s ease-in-out 0s infinite; 
} 
.line2 { 
    height:15px; 
    width:15px; 
    position:absolute; 
    top:0px; 
    left:100px; 
    background:green; 
    animation: squerframe2 2s ease-in-out 1s infinite; 
} 
.line3 { 
    height:15px; 
    width:15px; 
    position:absolute; 
    top:100px; 
    right:0px; 
    float: right; 
    background-color:red; 
    animation: squerframe3 2s ease-in-out 2s infinite; 
} 

.line4 { 
    height:15px; 
    width:15px; 
    position:absolute; 
    left:0px; 
    bottom: 0; 
    background:green; 
    animation: squerframe4 2s ease-in-out 3s infinite; 
} 
@Keyframes squerframe 
{ 
    0% { width:15px; opacity: 1; } 
    50% { width:115px; } 
    100%{ width:115px; opacity: 0; } 
} 
@Keyframes squerframe2 
{ 
    0% { height:15px; opacity: 1; } 
    50% { height:115px;    } 
    100%{ height:115px; opacity: 0; } 
} 
@Keyframes squerframe3 
{ 
    0% { width:115px; opacity: 0;} 
    50% { width:115px; } 
    100%{ width:15px; opacity: 1; } 
} 
@Keyframes squerframe3 
{ 
    0% { width:15px; opacity: 1;} 
    50% { width:115px; } 
    100%{ width:115px; opacity: 0; } 
} 
@Keyframes squerframe4 
{ 
    0% { height:15px; opacity: 1;} 
    50% { height:115px; } 
    100%{ height:115px; opacity: 0; } 
} 

@keyframes myframes 
{ 
    0% { top:0px; left:0px; } 
    25% { top:0px; left:100px; } 
    50% { top:100px; left:100px; } 
    75% { top:100px; left:0px; } 
    100% { top:0px; left:0px; } 
}