CODEWITHSUNDEEP
cssanimationflicker
Liz
Liz

Reputation: 43

CSS animation flickering, tried all tricks I could find

I am making a simple animation in Codepen - the poem fades in, then the word (that is also the button) fades in. The user clicks on the word and it changes to the next part of the poem.

My problem is that the poem and single word with flash before the fade out starts.

I have tried ALL the tricks I can find, adding:

and none of them have worked.

Link to the 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>

Upvotes: 2

Views: 11379

Answers (2)

Alon Parag
Alon Parag

Reputation: 137

I changed the animation-fil-mode of .animationComplete to backwards and it did the trick :)

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

Upvotes: 4

A. Rose
A. Rose

Reputation: 468

Try changing the animation start delay to 0 in the css:

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

Upvotes: 4

Related Questions