CSS动画闪烁，尝试了我能找到的所有技巧
CSS动画闪烁，尝试了我能找到的所有技巧
提问于 2018-03-16 19:29:06
我做了一个简单的动画在Codepen --诗消失了，然后单词(也是按钮)消失了。用户点击这个单词，它就会改变到诗歌的下一部分。
我的问题是，在淡出之前，这首诗和一个闪现的单词。
我已经尝试了我能找到的所有技巧，并补充道：
-webkit-backface-visibility: hidden;-webkit-transform-style: preserve-3d;-webkit-transform:translate3d(0,0,0);
但他们都没成功。
链接到代码页：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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-16 19:38:20
尝试将css中的动画启动延迟更改为0：
.animationComplete {
animation-name: complete;
animation-delay: 0s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}Stack Overflow用户
发布于 2018-03-16 20:01:39
我将.animationComplete的动画处理模式改为向后执行，它完成了以下操作:)
.animationComplete {
animation-name: complete;
animation-delay: 0.3s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: backwards;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49328200
复制相关文章
相似问题
腾讯云开发者
