$(".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>
