सीएसएस क्षैतिज रेखा एनीमेशन (ढाल रंग)

Question

मैं है रंग, एनिमेटेड, इस तरह खड़ी रेखा:

@keyframes colored { 
 
    0% { 
 
    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    } 
 
    12.5% { 
 
    background-image: -webkit-linear-gradient(left, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1); 
 
    background-image: -moz-linear-gradient(left, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1); 
 
    background-image: -o-linear-gradient(left, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1); 
 
    background-image: linear-gradient(to right, #62c2e4, #62c2e4 12.5%, #c4e17f 12.5%, #c4e17f 25%, #f7fdca 25%, #f7fdca 37.5%, #fecf71 37.5%, #fecf71 50%, #f0776c 50%, #f0776c 62.5%, #db9dbe 62.5%, #db9dbe 75%, #c49cde 75%, #c49cde 87.5%, #669ae1 87.5%, #669ae1); 
 
    } 
 
    25% { 
 
    background-image: -webkit-linear-gradient(left, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde); 
 
    background-image: -moz-linear-gradient(left, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde); 
 
    background-image: -o-linear-gradient(left, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde); 
 
    background-image: linear-gradient(to right, #669ae1, #669ae1 12.5%, #62c2e4 12.5%, #62c2e4 25%, #c4e17f 25%, #c4e17f 37.5%, #f7fdca 37.5%, #f7fdca 50%, #fecf71 50%, #fecf71 62.5%, #f0776c 62.5%, #f0776c 75%, #db9dbe 75%, #db9dbe 87.5%, #c49cde 87.5%, #c49cde); 
 
    } 
 
    37.5% { 
 
    background-image: -webkit-linear-gradient(left, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe); 
 
    background-image: -moz-linear-gradient(left, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe); 
 
    background-image: -o-linear-gradient(left, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe); 
 
    background-image: linear-gradient(to right, #c49cde, #c49cde 12.5%, #669ae1 12.5%, #669ae1 25%, #62c2e4 25%, #62c2e4 37.5%, #c4e17f 37.5%, #c4e17f 50%, #f7fdca 50%, #f7fdca 62.5%, #fecf71 62.5%, #fecf71 75%, #f0776c 75%, #f0776c 87.5%, #db9dbe 87.5%, #db9dbe); 
 
    } 
 
    50% { 
 
    background-image: -webkit-linear-gradient(left, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c); 
 
    background-image: -moz-linear-gradient(left, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c); 
 
    background-image: -o-linear-gradient(left, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c); 
 
    background-image: linear-gradient(to right, #db9dbe, #db9dbe 12.5%, #c49cde 12.5%, #c49cde 25%, #669ae1 25%, #669ae1 37.5%, #62c2e4 37.5%, #62c2e4 50%, #c4e17f 50%, #c4e17f 62.5%, #f7fdca 62.5%, #f7fdca 75%, #fecf71 75%, #fecf71 87.5%, #f0776c 87.5%, #f0776c); 
 
    } 
 
    62.5% { 
 
    background-image: -webkit-linear-gradient(left, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71); 
 
    background-image: -moz-linear-gradient(left, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71); 
 
    background-image: -o-linear-gradient(left, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71); 
 
    background-image: linear-gradient(to right, #f0776c, #f0776c 12.5%, #db9dbe 12.5%, #db9dbe 25%, #c49cde 25%, #c49cde 37.5%, #669ae1 37.5%, #669ae1 50%, #62c2e4 50%, #62c2e4 62.5%, #c4e17f 62.5%, #c4e17f 75%, #f7fdca 75%, #f7fdca 87.5%, #fecf71 87.5%, #fecf71); 
 
    } 
 
    75% { 
 
    background-image: -webkit-linear-gradient(left, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca); 
 
    background-image: -moz-linear-gradient(left, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca); 
 
    background-image: -o-linear-gradient(left, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca); 
 
    background-image: linear-gradient(to right, #fecf71, #fecf71 12.5%, #f0776c 12.5%, #f0776c 25%, #db9dbe 25%, #db9dbe 37.5%, #c49cde 37.5%, #c49cde 50%, #669ae1 50%, #669ae1 62.5%, #62c2e4 62.5%, #62c2e4 75%, #c4e17f 75%, #c4e17f 87.5%, #f7fdca 87.5%, #f7fdca); 
 
    } 
 
    87.5% { 
 
    background-image: -webkit-linear-gradient(left, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f); 
 
    background-image: -moz-linear-gradient(left, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f); 
 
    background-image: -o-linear-gradient(left, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f); 
 
    background-image: linear-gradient(to right, #f7fdca, #f7fdca 12.5%, #fecf71 12.5%, #fecf71 25%, #f0776c 25%, #f0776c 37.5%, #db9dbe 37.5%, #db9dbe 50%, #c49cde 50%, #c49cde 62.5%, #669ae1 62.5%, #669ae1 75%, #62c2e4 75%, #62c2e4 87.5%, #c4e17f 87.5%, #c4e17f); 
 
    } 
 
    100% { 
 
    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    } 
 
} 
 
.colored { 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    height: 7px; 
 
    border-top: 0; 
 
    background: #c4e17f; 
 
    border-radius: 5px; 
 
    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    animation-name: colored; 
 
    animation-duration: 2s; 
 
    animation-iteration-count: infinite; 
 
}

<hr class="colored">

मैं सोच रहा हूँ अगर यह कुछ बेहतर (पढ़ने में पूरा किया जा सकता : बेहतर तरीका)। मुझे सभी एनीमेशन चरणों की गणना करने और तैयार करने के लिए कुछ समय लगा (उत्कृष्टता का उपयोग कर रहा था) और मुझे बेवकूफ लगता है।

दूसरा प्रश्न (टिप्पणियों में से एक पर आधारित) यह है कि यह एनीमेशन चिकना हो सकता है? इसे कैसे पूरा करें?

Answer 1

अधिकतम करने के लिए अपने संरचना रखते हुए, यहाँ मेरी समाधान

.colored { 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    height: 7px; 
 
    border-top: 0; 
 
    background: #c4e17f; 
 
    border-radius: 5px; 
 
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    padding-right: 50%; 
 
    background-origin: content-box; 
 
    background-size: 200%; 
 
    animation-name: colored; 
 
    animation-duration: 2s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: steps(8); 
 
} 
 

 
@keyframes colored { 
 
    from {background-position: 0% 0%;} 
 
    to {background-position: 200% 0%;} 
 
}

<hr class="colored">

मैं एक चरणों समारोह के साथ पृष्ठभूमि स्थिति एनिमेट कर रहा हूँ, इसलिए है रंगों में अलग-अलग परिवर्तन आसानी से हासिल किया जाता है।

थोड़ा सा ट्रिकियर एक ढाल, उत्तरदायी और एनिमेटेबल का उपयोग होता है।

सबसे आसान समाधान के रूप में क्या करना चाहिए, यह बताते हुए कि पृष्ठभूमि आकार 100% है, प्रतिशत में पृष्ठभूमि-स्थिति में परिवर्तन से प्रभावित नहीं होता है। /:

चाल केवल आधा तत्व पर पृष्ठभूमि, (गद्दी चाल के साथ प्राप्त) सेट और फिर 200% तक आयाम स्थापित करने के लिए

Answer 2

एक विकल्प दो तत्वों का उपयोग करना होगा, जिसमें एक वाला दूसरा होगा।

बाहरी व्यक्ति के पास वास्तविक आकार और स्थिति होगी जो आप चाहते हैं। ढाल आकार के दोगुना हो जाएगा, ढाल दो बार दोहराया जाएगा। बाहरी तत्व में अतिप्रवाह होता है: मास्क को छुपाया जाता है जो इसकी सीमाओं से परे फैला होता है।

फिर आप बाहरी के सापेक्ष आंतरिक तत्व की स्थिति को एनिमेट करते हैं।

Answer 3

यहां उनके उत्तर में उल्लिखित jcaron का उपयोग करने का एक उदाहरण दिया गया है। आप बस अपनी क्षैतिज रेखा की प्रतियों का उपयोग करते हैं और उन्हें एक दूसरे के बगल में रखते हैं, पहले तत्व से पहले अंतिम तत्व। मूल तत्व को hr तत्वों में से एक के रूप में चौड़ा होना चाहिए। फिर आप आसानी से पैरेंट तत्व को एनिमेट कर सकते हैं और एनीमेशन के भीतर रैखिक-ढाल को फिर से नहीं लेना पड़ता है।

@keyframes hr-animation { 
 
    from{ transform: translate(0, 0); } 
 
    to{ transform: translate(50%, 0); } 
 
} 
 
@-webkit-keyframes hr-animation { 
 
    from{ -webkit-transform: translate(0, 0); } 
 
    to{ -webkit-transform: translate(50%, 0); } 
 
} 
 
.hr-animation { 
 
    -webkit-animation: hr-animation 5s linear infinite; 
 
    animation: hr-animation 5s linear infinite; 
 
} 
 

 
body { 
 
    margin: 10px 0 0 0; 
 
    background: #555; 
 
} 
 

 
.colored { 
 
    background-image: linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 
 
} 
 

 
.container { 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.wrap { 
 
    font-size: 0; 
 
    height: 5px; 
 
    width: 200%; 
 
    position: relative; 
 
} 
 

 
.wrap hr { 
 
    border: none; 
 
    height: 5px; 
 
    width: 50%; 
 
    position: absolute; 
 
} 
 

 
.wrap hr:last-child { 
 
    left: -50%; 
 
}

<div class="container"> 
 
    <div class="wrap hr-animation"> 
 
    <hr class="colored "> 
 
    <hr class="colored "> 
 
    </div> 
 
</div>