Macht geschmeidig animiert gestreift div

Ich bin Schwierigkeiten bei der Herstellung eines nahtlos animierten gestreift, div, wie ein Fortschrittsbalken.

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

Das problem ist, dass es eine seltsame Versatz auf der rechten Seite das Hintergrundbild Farbverlauf. Wie kann ich das korrigieren dieser Fehlausrichtung?

  • Wie über das ändern der width des Elements zu 283px?
InformationsquelleAutor Sir Neuman | 2015-07-21
Schreibe einen Kommentar