无限的CSS3动画闪烁

时间：2014-10-23 13:44:59

标签： css css3 css-animations

我创造了一个无限的动画，它运作良好，但有时在动画中它会回到一个步骤（就像快照一样）并继续像什么都没有。

Link to see it live这是我的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>

所以我想知道为什么这个“bug”，因为它是一个循环，每次都不会出现这个bug。

2 个答案:

答案 0 :(得分：2)

请改用翻译，例如：transform: translateY(60px)

旁白：有no -ms- prefix needed for IE。

演示示例（Webkit和非前缀）

＆＃13;
＆＃13; 
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);
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

感谢@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; }
}

隐藏元素似乎没问题！

我也尝试了25.1％，但这并没有解决问题。

相关问题
最新问题