CSS animacja pozioma linia (gradient kolorów)

mam kolorowe, animowane, pionowa linia jak ten:CSS animacja pozioma linia (gradient kolorów)

@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">

Zastanawiam się, czy to może być dokonane w niektórych lepiej (czytaj : mądrzejszy sposób). Kosztowało mnie to trochę czasu, aby obliczyć i przygotować wszystkie etapy animacji (korzystałem z excell) i czuję się głupio.

Drugie pytanie (oparte na jednym z komentarzy) dotyczy tego, czy animacja może być płynniejsza? Jak to osiągnąć?

Źródło

2015-12-13 Mkay1

Spróbuj zmniejszyć ilość kodu w swoim pytaniu użyciu http://stackoverflow.com/help/mcve –

@JasonD, myślę, że to właśnie OP jest pytany, jak to zrobić. Trochę niesprawiedliwe, aby poprosić o to, zanim zapytają. –

Czy animacja może być płynna? – Thomas

Utrzymanie struktury do maksimum, tu jest moje rozwiązanie

.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">

ja animowanie pozycję tła z funkcją kroków, więc dyskretna zmiana kolorów jest łatwo osiągalna.

Trochę trudniejsze jest użycie pojedynczego gradientu, reagowania i animacji.

Co jest najłatwiejszym rozwiązaniem, stwierdzającym, że rozmiar tła wynosi 100%, nie ma wpływu na zmiany położenia tła w procentach.

Sztuką jest, aby ustawić tło na tylko połowę elementu (uzyskiwana z trick dopełnienia), a następnie ustawić wymiar 200%

Źródło

2015-12-14 19:11:46 vals

Jedną opcją byłoby użycie dwóch elementów, z których jeden zawiera drugi.

Zewnętrzna ma aktualny rozmiar i pożądaną pozycję. Wewnętrzny byłby dwukrotnie większy, a gradient powtórzony dwukrotnie. Zewnętrzny element miałby przepełnienie: ukryty, by zamaskować wszystko, co wykracza poza jego granice.

Następnie można animować pozycję elementu wewnętrznego względem powierzchni zewnętrznej.

Źródło

2015-12-14 08:44:41 jcaron

Oto przykład użycia podejścia jcaron wspomnianego w jego odpowiedzi. Używasz tylko do kopiowania poziomej linii i umieszczasz je obok siebie, ostatni element przed pierwszym. Element rodzica musi być dwa razy większy niż jeden z elementów hr. Wtedy możesz łatwo animować element rodzica i nie musisz przerysowywać gradientu liniowego w animacji.

@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>

Źródło

2015-12-14 11:54:24 DavidDomain

CSS animacja pozioma linia (gradient kolorów)

Odpowiedz

Powiązane problemy