Выполнение плавного анимированного полосатого div

Question

У меня возникают проблемы с плавным анимированным полосатым div, как индикатор выполнения.

CSS:

.animationStripes{ 
    width: 300px; 
    height: 50px; 
    background-image: repeating-linear-gradient(-45deg, rgb(0, 0, 0), rgb(0, 0, 0) 25px, blue 25px, blue 50px); 
    -webkit-animation:progress 2s linear infinite; 
    -moz-animation:progress 2s linear infinite; 
    -ms-animation:progress 2s linear infinite; 
    animation:progress 2s linear infinite; 
} 
@keyframes progress{ 
    0% { 
    background-position: 0 0; 
    } 
    100% { 
    background-position: -70px 0px; 
    } 
} 

http://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview

Проблема заключается в том, что есть странный перекос на самой правой стороне градиента фонового изображения. Как исправить это несоосность?

Answer 1

Сделайте линейный градиент с процентными значениями, а не с пикселем. применять фон-размер, в вашем случае я бы сказал background-size:50px 50px; и в ключевых кадрах, переместите фон столько же, как фонового размер background-position: -50px 0px;

Также пример http://plnkr.co/edit/HrSxkhYZaWp81fAQEaJn?p=preview

Если ответ вас устраивает, то отмечающие это как ответ и хороший день :)

Answer 2

Ну, мне удалось исправить это, добавив одну вещь и не внося никаких изменений в исходный код. Просто добавив background-size: 150% 100%;, изображение с неуклюже сместилось с правой стороны.

http://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview

Answer 3

Вы видели this tutorial на CSS хитрости?

@import url(https://fonts.googleapis.com/css?family=Ropa+Sans); 
 
body { 
 
    padding: 20px; 
 
    font-family: 'Ropa Sans', sans-serif; 
 
} 
 

 
.product { 
 
    width: 376px; 
 
    padding: 15px; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
} 
 

 
.product>img { 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.product:hover .product-hover, 
 
.product:active .product-hover { 
 
    opacity: 1; 
 
} 
 

 
.product-hover { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    opacity: 0; 
 
    transition: opacity 0.3s ease; 
 
    background-size: 30px 30px; 
 
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); 
 
    animation: barberpole 0.5s linear infinite; 
 
} 
 

 
@keyframes barberpole { 
 
    from { 
 
    background-position: 0 0; 
 
    } 
 
    to { 
 
    background-position: 60px 30px; 
 
    } 
 
} 
 

 
.product-info { 
 
    position: absolute; 
 
    bottom: 30px; 
 
    right: 30px; 
 
    background: white; 
 
    width: 150px; 
 
    padding: 10px 10px 50px 10px; 
 
} 
 

 
.subhead { 
 
    color: #f00; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
} 
 

 
.product-name { 
 
    color: #990033; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    letter-spacing: -1px; 
 
} 
 

 
.price { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 10px; 
 
} 
 

 
.amount { 
 
    color: red; 
 
    font-size: 150%; 
 
} 
 

 
.amount>span { 
 
    font-size: 75%; 
 
} 
 

 
h1 { 
 
    font-size: 72px; 
 
    margin: 2px 0 0 0; 
 
} 
 

 
VIEW SCSS CODE

<div class="product"> 
 
    <div class="product-hover"></div> <img src="http://fillmurray.com/300/300" /> 
 
    <div class="product-info"> 
 
    <div class="subhead">Sale</div> 
 
    <h2 class="product-name">Fleece</h2> 
 
    <p class="product-description">Beat the chill and get cozy.</p> 
 
    <div class="price"> <span class="from">from</span> <span class="amount">  <span>$</span>9.90 </span> 
 
    </div> 
 
    </div> 
 
</div>