How do I stop the flickering in this css animation? - html

Question

The css animation is http://codepen.io/pksunkara/pen/gbejPv. It was inspired by http://codepen.io/fbrz/pen/ljuJn.
EDIT: How do you stop the first frame jump in that codepen?
HTML of my codepen is given below.
<div id="loader">
<div id="loaderout" class="box">
<div id="loaderin" class="box"></div>
<div class="ballbox box">
<div class="first-1 ball"></div>
<div class="second-1 ball"></div>
</div>
</div>
<div class="ballbox box">
<div class="first-2 ball"></div>
<div class="second-2 ball"></div>
</div>
</div>
CSS of my codepen is given below:
body {
background: #e9e9e9;
}
#loader {
position: absolute;
top: calc(50% - 40px);
left: calc(50% - 40px);
}
.box {
width: 80px;
height: 80px;
}
#loaderout + .ballbox {
animation: rotate-1 1.5s linear infinite;
}
#loaderin + .ballbox {
animation: rotate-2 1.5s ease-in-out infinite;
}
#loaderout {
animation: rotate-1 1.5s linear infinite;
clip: rect(0, 80px, 80px, 40px);
position: absolute;
}
#keyframes rotate-1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(220deg);
}
}
#keyframes rotate-2 {
0% {
transform: rotate(-140deg);
}
100% {
transform: rotate(140deg);
}
}
#loaderin {
animation: rotate-2 1.5s ease-in-out infinite,
animate 1.5s ease-in-out infinite;
clip: rect(0, 80px, 80px, 40px);
border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
}
#keyframes animate {
0% {
box-shadow: inset #e04e38 0 0 0 16px;
}
50% {
box-shadow: inset #e04e38 0 0 0 2px;
}
100% {
box-shadow: inset #e04e38 0 0 0 16px;
}
}
.ball {
position: absolute;
background: #e04e38;
border-radius: 50%;
}
.first-1 {
animation: borderball 1.5s ease-in-out infinite;
}
.second-1 {
animation: borderball 1.5s ease-in-out infinite;
bottom: 0;
}
.first-2 {
animation: borderball 1.5s ease-in-out infinite,
firstball 1.5s ease-in-out infinite;
}
.second-2 {
animation: borderball 1.5s ease-in-out infinite,
secondball 1.5s ease-in-out infinite;
bottom: 0;
visibility: hidden;
}
#keyframes firstball {
1%, 49% {
visibility: visible;
}
0%, 50%, 100% {
visibility: hidden;
}
}
#keyframes secondball {
0%, 50%, 100% {
visibility: hidden;
}
51%, 99% {
visibility: visible;
}
}
#keyframes borderball {
0%, 100% {
width: 16px;
height: 16px;
left: 32px;
}
50% {
width: 2px;
height: 2px;
left: 38px;
}
}

Answer 1

I fixed it by changing some specific CSS rules to the following.
.second-2 {
animation: borderball 1.5s ease-in-out infinite,
secondball 1.5s ease-in-out infinite;
bottom: 0;
opacity: 0;
}
#keyframes firstball {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
#keyframes secondball {
0%, 50% {
opacity: 0;
}
51%, 100% {
opacity: 1;
}
}