Question

我在Codepen中制作一个简单的动画 - 诗歌淡入，然后单词（也就是按钮）淡入。用户点击该单词并将其更改为诗歌的下一部分。

我的问题是在淡出之前用闪光的诗和单词开始。

我已经尝试了所有可以找到的技巧，并添加：

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

Answer 1

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

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

Answer 2

我将.animationComplete的animation-fil-mode更改为向后并且它可以解决问题：）

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

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

2 个答案: