Jak zapobiec zatrzymywaniu animacji CSS podczas zmiany kierunku ruchu?

Question

Mam prosty pasek postępu ładowania i chcę nadać mu nieskończony efekt migania. Napisałem więc wymagane kody i pokazuje efekt migania, ale, jeśli zmienię kierunek paska postępu z float, problem sam się wyświetli, a miganie zostanie zatrzymane!

Live demo in JsFiddel

żywo demo w SO:

.parrent{ 
 
    border-radius:10px; 
 
     -webkit-transform: translateZ(0); 
 
     width:100px; 
 
     margin:0 auto; 
 
} 
 
.child{ 
 
    width: 80% !important; 
 
    transition: all 2s ease; 
 
    opacity: .3; 
 
} 
 
.empty{ 
 
    -webkit-animation-name: empty-anim; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); 
 
    -webkit-animation-duration: 1.7s; 
 
} 
 

 
@-webkit-keyframes empty-anim { 
 
    0% { opacity: 1; } 
 
    50% { opacity: .3; } 
 
    100% { opacity: 1; } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
A. Without blink problem: 
 
<div class="parrent progress progress-striped dropdown-toggle"> 
 
    <div class="child empty progress-bar progress-bar-danger pull-right" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> 
 
</div> 
 
<hr> 
 
B. With blink Problem: 
 
<div class="parrent progress progress-striped dropdown-toggle"> 
 
    <div class="child empty progress-bar progress-bar-danger pull-left" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> 
 
</div>

Uwaga: różnica między 2 pasek postępu jest właśnie w użyciu pull-left w (B) ja nstead z pull-right w (A).

Moje pytanie brzmi: dlaczego i jaka jest Twoja sugestia rozwiązania tego problemu?

---

Edit:

Moja Przeglądarka: Google Chrome Wersja 56.0.2924.87

Preview:

Answer 1

Dzięki @vanburen jego komentarz rozwiązany problem:

Dodaj

-webkit-transform: translateZ(10px); 
transform: translateZ(10px); 

do .child klasa

żywo demo w SO:

.parrent{ 
 
    border-radius:10px; 
 
    -webkit-transform: translateZ(0); 
 
    width:100px; 
 
    margin:0 auto; 
 
} 
 
.child{ 
 
    width: 80% !important; 
 
    transition: all 2s ease; 
 
    opacity: .3; 
 
    -webkit-transform: translateZ(10px); 
 
    transform: translateZ(10px); 
 
} 
 
.empty{ 
 
    -webkit-animation-name: empty-anim; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); 
 
    -webkit-animation-duration: 1.7s; 
 
} 
 

 
@-webkit-keyframes empty-anim { 
 
    0% { opacity: 1; } 
 
    50% { opacity: .3; } 
 
    100% { opacity: 1; } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
A. Without blink problem: 
 
<div class="parrent progress progress-striped dropdown-toggle"> 
 
    <div class="child empty progress-bar progress-bar-danger pull-right" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> 
 
</div> 
 
<hr> 
 
B. With blink Problem: 
 
<div class="parrent progress progress-striped dropdown-toggle"> 
 
    <div class="child empty progress-bar progress-bar-danger pull-left" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> 
 
</div>

Answer 2

Wystarczy usunąć transformacji: translate (0); Obiekt z klasy nadrzędnej i wszystko zadziała zgodnie z oczekiwaniami ..

.parrent { 
 
    border-radius: 10px; 
 
    /* -webkit-transform: translateZ(0);*/ 
 
    width: 100px; 
 
    margin: 0 auto; 
 
} 
 

 
.child { 
 
    width: 80% !important; 
 
    transition: all 2s ease; 
 
    opacity: .3; 
 
} 
 

 
.empty { 
 
    -webkit-animation-name: empty-anim; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); 
 
    -webkit-animation-duration: 1.7s; 
 
} 
 

 
@-webkit-keyframes empty-anim { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    50% { 
 
    opacity: .3; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
A. Without blink problem: 
 
<div class="parrent progress progress-striped dropdown-toggle"> 
 
    <div class="child empty progress-bar progress-bar-danger pull-right" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> 
 
</div> 
 
<hr> B. With blink Problem: 
 
<div class="parrent progress progress-striped dropdown-toggle"> 
 
    <div class="child empty progress-bar progress-bar-danger pull-left" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> 
 
</div>