I have a simple bootstrap Progress bar, and I want to give it an endless blinking effect. Therefore, I wrote the required codes and showed a well blinking effect, but if I changed the direction of the progress bar with float , the problem will seem to me and the blinking will stop!
Live Demo at JsFiddel
Live demo in SO format:
.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>
Note. . The difference between the two progress bars is only to use pull-left in ( B ) instead of pull-right in ( A ).
My question is: why and how do you propose solving this problem?
Edit:
My browser: Google Chrome Version 56.0.2924.87
Preview: 
source share