Making smoothly animated striped div - html

Question

I'm having trouble making a smoothly animated striped div, like a progress bar.
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
The problem is that there is a weird misalignment on the very right side of the background image gradient. How do i fix this misalignment?

Answer 1

Have you seen this tutorial on CSS Tricks?
#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>

Answer 2

Well I managed to fix it just by adding one thing and making no alterations to my original code. Simply adding background-size: 150% 100%; kept the image from clipping awkwardly on the right side.
http://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview

Answer 3

Make the linear gradient with percentage values, not with pixel. apply background-size, in your case i'd say background-size:50px 50px; and in keyframes, move the background as much, as is the background size background-position: -50px 0px;
Also an example
http://plnkr.co/edit/HrSxkhYZaWp81fAQEaJn?p=preview
If the answer suits you, then mark it as answered and have a good day :)