CODEWITHSUNDEEP
csscss-animations
H4mm3R
H4mm3R

Reputation: 345

Infinite CSS3 Animation Flickers

I have created an infinite animation, which is working well, but sometimes in the animation it's falling back to a step (like a snap back) and continue like nothing.

Link to see it live and this is my CSS / HTML

div#qLpercentage {
  bottom: 0;
  font-family: 'Open Sans', arial, sans-serif;
  font-size: 24px !important;
  height: 20px !important;
  margin: auto !important;
  top: 120px !important;
}
div#qLatelier,
div#qLhammer {
  bottom: 0;
  color: #FFF;
  font-family: 'Open Sans', arial, sans-serif;
  font-size: 48px;
  height: 48px;
  left: 0;
  letter-spacing: 0.2em;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
}
div#qLatelier {
  bottom: 80px;
  font-weight: 300;
}
div#qLhammer {
  letter-spacing: 0.37em;
  top: 20px;
}
div#qLatelier_text {
  animation: movingTop 2s ease-in-out infinite;
  -webkit-animation: movingTop 2s ease-in-out infinite;
  -o-animation: movingTop 2s ease-in-out infinite;
  -ms-animation: movingTop 2s ease-in-out infinite;
}
@keyframes movingTop {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: -60px;
  }
  26% {
    margin-top: 60px;
  }
  50% {
    margin-top: 0;
  }
  100% {
    margin-top: 0;
  }
}
@-webkit-keyframes movingTop {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: -60px;
  }
  26% {
    margin-top: 60px;
  }
  50% {
    margin-top: 0;
  }
  100% {
    margin-top: 0;
  }
}
@-o-keyframes movingTop {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: -60px;
  }
  26% {
    margin-top: 60px;
  }
  50% {
    margin-top: 0;
  }
  100% {
    margin-top: 0;
  }
}
@-ms-keyframes movingTop {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: -60px;
  }
  26% {
    margin-top: 60px;
  }
  50% {
    margin-top: 0;
  }
  100% {
    margin-top: 0;
  }
}
div#qLhammer_text {
  animation: movingBottom 2s ease-in infinite;
  -webkit-animation: movingBottom 2s ease-in infinite;
  -o-animation: movingBottom 2s ease-in infinite;
  -ms-animation: movingBottom 2s ease-in infinite;
}
@keyframes movingBottom {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: 60px;
  }
  26% {
    margin-top: -60px;
  }
  50% {
    margin-top: 0;
  }
  100% {
    margin-top: 0;
  }
}
@-webkit-keyframes movingBottom {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: 60px;
  }
  26% {
    margin-top: -60px;
  }
  50% {
    margin-top: 0;
  }
  100% {
    margin-top: 0;
  }
}
@-o-keyframes movingBottom {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: 60px;
  }
  26% {
    margin-top: -60px;
  }
  50% {
    margin-top: 0;
  }
  100% {
    margin-top: 0;
  }
}
@-ms-keyframes movingBottom {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: 60px;
  }
  26% {
    margin-top: -60px;
  }
  50% {
    margin-top: 0;
  }
  100% {
    margin-top: 0;
  }
}
<div class="queryloader__overlay" id="qLoverlay" style="position: fixed; width: 100%; height: 100%; background-color: rgb(0, 0, 0); z-index: 666999; top: 0px; left: 0px; transition: opacity 300ms ease 0s;">
  <div id="qLatelier">
    <div id="qLatelier_text">Atelier</div>
  </div>
  <div class="queryloader__overlay__percentage" id="qLpercentage" style="height: 40px; width: 100%; position: absolute; font-size: 3em; top: 50%; left: 0px; margin-top: -60px; text-align: center; color: rgb(239, 239, 239);">100%</div>
  <div id="qLhammer">
    <div id="qLhammer_text">Hammer</div>
  </div>
</div>

So I'm wondering why this "bug" and, because it's a loop, this bug doesn't appear every time.

Upvotes: 2

Views: 1157

Answers (2)

misterManSam
misterManSam

Reputation: 24692

Use translate instead, like: transform: translateY(60px)

Aside: There is no -ms- prefix needed for IE.

Demo Example (Webkit and Non-prefixed)

div#qLpercentage {
  bottom: 0;
  font-family: 'Open Sans', arial, sans-serif;
  font-size: 24px !important;
  height: 20px !important;
  margin: auto !important;
  top: 120px !important;
}
div#qLatelier,
div#qLhammer {
  bottom: 0;
  color: #FFF;
  font-family: 'Open Sans', arial, sans-serif;
  font-size: 48px;
  height: 48px;
  left: 0;
  letter-spacing: 0.2em;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
}
div#qLatelier {
  bottom: 80px;
  font-weight: 300;
}
div#qLhammer {
  letter-spacing: 0.37em;
  top: 20px;
}
div#qLatelier_text {
  -webkit-animation: movingTop 2s ease-in-out infinite;
  animation: movingTop 2s ease-in-out infinite;
}
div#qLhammer_text {
  -webkit-animation: movingBottom 2s ease-in-out infinite;
  animation: movingBottom 2s ease-in-out infinite;
}
@-webkit-keyframes movingTop {
  0% {
    transform: translateY(60px);
  }
  25% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-60px);
  }
  100% {
    transform: translateY(-60px);
  }
}
@-webkit-keyframes movingBottom {
  0% {
    transform: translateY(-60px);
  }
  25% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(60px);
  }
}
@keyframes movingTop {
  0% {
    transform: translateY(60px);
  }
  25% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-60px);
  }
  100% {
    transform: translateY(-60px);
  }
}
@keyframes movingBottom {
  0% {
    transform: translateY(-60px);
  }
  25% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(60px);
  }
}
<div class="queryloader__overlay" id="qLoverlay" style="position: fixed; width: 100%; height: 100%; background-color: rgb(0, 0, 0); z-index: 666999; top: 0px; left: 0px; transition: opacity 300ms ease 0s;">
  <div id="qLatelier">
    <div id="qLatelier_text">Atelier</div>
  </div>
  <div class="queryloader__overlay__percentage" id="qLpercentage" style="height: 40px; width: 100%; position: absolute; font-size: 3em; top: 50%; left: 0px; margin-top: -60px; text-align: center; color: rgb(239, 239, 239);">100%</div>
  <div id="qLhammer">
    <div id="qLhammer_text">Hammer</div>
  </div>
</div>

Upvotes: 2

H4mm3R
H4mm3R

Reputation: 345

Thank to @Danko 

@keyframes movingBottom {
   0% { margin-top : 0; }
   25%   { margin-top : 60px;opacity:0; }
   26%   { margin-top : -60px; }
   50%   { margin-top : 0;opacity:1; }
   100%   { margin-top : 0; }
}

Hide the element seems to be fine !

I tried the 25.1% too, but this didn't fix the problem.

Upvotes: 1

Related Questions