CSS动画闪烁，尝试了我能找到的所有技巧答案

【问题标题】：CSS animation flickering, tried all tricks I could findCSS动画闪烁，尝试了我能找到的所有技巧
【发布时间】：2018-03-17 04:01:39
【问题描述】：

我正在 Codepen 中制作一个简单的动画 - 诗歌淡入，然后单词（也是按钮）淡入。用户单击单词，它会切换到诗歌的下一部分。

我的问题是在淡出开始之前带有flash的诗和单词。

我已经尝试了所有我能找到的技巧，并补充说：

-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);

它们都没有奏效。

codepen 链接：https://codepen.io/zaenaria/pen/xWVLmP

$(".btnQuestion").hide();

var answer = document.getElementById('answerBtn');

answer.style.cursor = 'pointer';
answer.onclick = function() {
    $(".poem").addClass("animationComplete");
    $(".btnAnswer").addClass("animationComplete");
    $(".answer").addClass("animationFade");
    $(".btnQuestion").show();
    $(".btnQuestion").addClass("animationFade");
    
};

var question = document.getElementById('questionBtn');

question.style.cursor = "pointer";
question.onclick = function() {
    $(".answer").addClass("animationComplete");
    $(".btnQuestion").addClass("animationComplete");
    $(".question").addClass("animationFade");
    $(".rip").addClass("animationRIP");
};

body {
  background: url("http://res.cloudinary.com/zaenaria/image/upload/v1521062114/paper_texture.jpg");
  background-repeat: no-repeat;
  background-position: cover;
  color: white;
}

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
}

.poem {
  font-size: 30px;
  font-family: 'Open Sans Condensed', sans-serif;
  height: 300px;
  width: 900px;
  position: absolute;
  margin: -150px 0 0 -450px;
  opacity: 0;
  
  animation-name: fade;
  animation-delay: 0.5s;
  animation-duration: 1.5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.answer {
  font-size: 30px;
  font-family: 'Open Sans Condensed', sans-serif;
  height: 160px;
  width: 900px;
  position: absolute;
  margin: -80px 0 0 -450px;
  opacity: 0;
}

.question {
  font-size: 50px;
  font-family: 'Open Sans Condensed', sans-serif;
  height: 80px;
  width: 400px;
  position: absolute;
  margin: -40px 0 0 -200px;
  opacity: 0;
}

.rip {
  font-size: 50px;
  font-family: 'Open Sans Condensed', sans-serif;
  text-align: center;
  height: 140px;
  width: 400px;
  position: absolute;
  margin: 25px 0 0 -200px;
  opacity: 0;
}

.btnAnswer{
  font-size: 50px;
  font-family: 'Open Sans Condensed', sans-serif;
  text-align: center;
  height: 80px;
  width: 180px;
  position: absoulte;
  margin: 200px 0 0 -100px;
  opacity: 0;
  
  animation-name: fade;
  animation-delay: 2.0s;
  animation-duration: 1.5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.btnAnswer:hover {
  background: #f7f7f7;
  color: black;
}

.btnQuestion:hover {
  background: #f7f7f7;
  color: black;
}

.btnQuestion {
  font-size: 50px;
  font-family: 'Open Sans Condensed', sans-serif;
  text-align: center;
  height: 80px;
  width: 180px;
  position: absoulte;
  margin: -150px 0 0 -90px;
  opacity: 0;
}

@keyframes fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes complete {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.animationFade {
  animation-name: fade;
  animation-delay: 2.0s;
  animation-duration: 1.5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.animationComplete {
  animation-name: complete;
  animation-delay: 0.3s;
  animation-duration: 1.0s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.animationRIP {
  animation-name: fade;
  animation-delay: 4.0s;
  animation-duration: 1.0s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="wrapper">
    <div class="poem">Oh me! Oh life! of the questions of these recurring, </br>
    Of the endless trains of the faithless, of cities fill’d with the foolish, </br>
  Of myself forever reproaching myself, (for who more foolish than I, and who more faithless?) </br>
Of eyes that vainly crave the light, of the objects mean, of the struggle ever renew’d, </br>
Of the poor results of all, of the plodding and sordid crowds I see around me, </br>
Of the empty and useless years of the rest, with the rest me intertwined, </br>
The question, O me! so sad, recurring—What good amid these, O me, O life?</div>
<div class="answer">
That you are here—that life exists and identity, </br>
That the powerful play goes on, and you may contribute a verse.</br>
~Walt Whitman
</div>
<div class="question">What will your verse be?
    </div>
<div class="rip">R.I.P Robin Williams</br>
1951-2014</div>
<div class="btnAnswer" id="answerBtn">Answer.</div>
<div class="btnQuestion" id="questionBtn">Question.</div>
  </div>
</body>

【问题讨论】：

我很确定由于初始动画而发生冲突
是的，它是初始动画和不透明度的初始值
它在我使用 FireFox 60.0b3（64 位）的浏览器上不闪烁
我已经尝试将诗歌元素的不透明度值改回1并取出初始动画，其他元素仍然闪烁。

标签： css animation flicker

【解决方案1】：

尝试在 css 中将动画开始延迟更改为 0：

.animationComplete {
  animation-name: complete;
  animation-delay: 0s;
  animation-duration: 1.0s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

【讨论】：

完美运行！如果有延迟，不知道为什么会有闪烁，但我很高兴这有效！谢谢！
我认为这里的延迟是延迟显示的开始 - 所以“旧”项目（文本）被删除，有一个延迟，然后是“新”项目（相同文本）显示。如果您想要更多延迟，可以在调用“完成”函数之前创建自己的延迟。

【解决方案2】：

我将 .animationComplete 的动画文件模式更改为向后，它成功了 :)

.animationComplete {
 animation-name: complete;
 animation-delay: 0.3s;
 animation-duration: 1.0s;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
 }

【讨论】：