How to prevent CSS animation to be stopped when change float direction?

Question

I have a simple bootstrap Progress bar and i want to give it an infinite blinking effect. So i wrote the required codes and it show the blinking effect well but if i change the direction of the progress bar with float a problem show itself to me and blinking will be stopped!

Live demo in JsFiddel

Live demo in 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>

Note: The different between 2 progress bar is just in using pull-left in (B) instead of pull-right in (A).

My question is why and what is your suggestion to solve this problem?

Edit:

My Browser: Google Chrome Version 56.0.2924.87

Preview:

In my browser just first progress bar (A) has blinking effect! My browser:Google Chrome Version 56.0.2924.87 — Ramin Bateni, Feb 17 '17 at 19:00
That is the same browser I am using and they are both blinking — zgood, Feb 17 '17 at 19:02
Add `-webkit-transform: translateZ(10px); transform: translateZ(10px);` to your `.child` class. — vanburen, Feb 17 '17 at 19:08
@zgood, I added an animated image of the problem to my question. — Ramin Bateni, Feb 17 '17 at 19:13
@vanburen, Thank you, it works now. Do you know what happen when i change the float and why `-webkit-transform: translateZ(10px); transform: translateZ(10px);` solve it? Please write an answer. — Ramin Bateni, Feb 17 '17 at 19:18
@vanburen Cool!, Note that removing `-webkit-transform: translateZ(0)` from `.parent` will also fix the rendering, as discussed in this [question](http://stackoverflow.com/a/15203880/1203738), I would opt for that if possible, rather remove the culprit instead of tagging on another hack. — Lars, Feb 17 '17 at 19:19
@Lars, when we remove `webkit-transform: translateZ(0)` from the parent it works but it cause another problem: Child will not follow the parent border-radius and it show itself out of parent corners. I wand child be limited in the parent with rounded corners, So i should use `webkit-transform: translateZ(0)`. To see it better, increase the `border-radius` of the parent and run it without `webkit-transform: translateZ(0)`. — Ramin Bateni, Feb 17 '17 at 19:25

score 0 · Answer 1 · answered Feb 18 '17 at 04:51

Just remove the transform:translate(0); property from parent class and everything will work as desired..

.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>

Your answer is not correct, because 4 corners of the Progress Bar in your answer is not rounded but i tried to make it as rounded in my question and the problem is base keeping rounded corners during animation. — Ramin Bateni, Feb 22 '17 at 14:10

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Thanks to @vanburen, its comment solved the problem:

Add

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

to the .child class

Live demo in 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>

How to prevent CSS animation to be stopped when change float direction?

2 Answers2