延迟按钮动画CSS [重复]
Posted
技术标签:
【中文标题】延迟按钮动画CSS [重复]【英文标题】：delayed button animation CSS [duplicate] 【发布时间】：2019-08-15 15:04:56 【问题描述】：我希望在打字动画完成后显示“输入”按钮。 如果我在动画之前设置 display: none ，即使在动画完成后也不会显示。我认为问题在于“@keyframe clickit”，但我无法弄清楚它是什么。
@import url(https://fonts.googleapis.com/css?family=Teko);
body
margin: 0;
padding: 0;
background-color: #3c3f41;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.exec h2
color: #fff;
font-family: 'Teko', sans-serif;
font-weight: lighter;
overflow: hidden;
border-right: 2px solid orange;
padding-right: 5px;
white-space: nowrap;
margin: 0 auto;
animation:
typing 1s steps(20, end),
cursor 0.5s step-end infinite;
/*animation-delay: 5s;*/
@keyframes typing
from width: 0
to width: 100%
@keyframes cursor
from, to
border-color: transparent;
50%
border-color: orange;
.enter
border: 1px solid transparent;
border-radius: 15px;
min-width: 70px;
background-color: orange;
color: white;
font-size: 16px;
/*display: none;*/
animation-name: clickit;
animation-delay: 1s;
@keyframes clickit
from display: none;
to display: block
<body>
<div class="exec">
<h2>
execute portfolio;
</h2>
</div>
<button class="enter">enter</button>
</body>【问题讨论】：
你不能动画显示，试试visibility
@keyframes clickit from visibility: hidden; to visibility: visible; 这不会在 1 秒后恢复其可见性。
确实如此：jsfiddle.net/f7sb5yg4
【参考方案1】：
显示不适用于 CSS 过渡或动画，请查看此 previous post 以更好地理解它。
我建议您转换按钮的opacity 或visibility 而不是其显示。
@keyframes clickit
from opacity : 0 ; /* Or visibility: hidden; */
to opacity : 1; /* Or visibility: visible; */
【讨论】：
我应该设置不透明度：0；在此之前的“.enter”类中？ 好的，是的，我必须这样做，现在可以了。谢谢 没问题，很高兴能帮上忙【参考方案2】：我只是用一些 CSS 更新了您的代码，希望对您有所帮助。谢谢
@import url(https://fonts.googleapis.com/css?family=Teko);
body
margin: 0;
padding: 0;
background-color: #3c3f41;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.exec h2
color: #fff;
font-family: 'Teko', sans-serif;
font-weight: lighter;
overflow: hidden;
border-right: 2px solid orange;
padding-right: 5px;
white-space: nowrap;
margin: 0 auto;
animation:
typing 1s steps(20, end),
cursor 0.5s step-end infinite;
/*animation-delay: 5s;*/
@keyframes typing
from width: 0
to width: 100%
@keyframes cursor
from, to
border-color: transparent;
50%
border-color: orange;
.enter
border: 1px solid transparent;
border-radius: 15px;
min-width: 70px;
background-color: orange;
color: white;
font-size: 16px;
animation: clickit 1.5s
@keyframes clickit
0% opacity: 0
80% opacity: 0
100% opacity: 1
<body>
<div class="exec">
<h2>
execute portfolio;
</h2>
</div>
<button class="enter">enter</button>
</body>【讨论】：
【参考方案3】：Display 属性无法设置动画。
如果你使用animation-delay:1s，那么按钮仍然会在动画开始前显示 1 秒。
试试下面的代码。
@import url(https://fonts.googleapis.com/css?family=Teko);
body
margin: 0;
padding: 0;
background-color: #3c3f41;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.exec h2
color: #fff;
font-family: 'Teko', sans-serif;
font-weight: lighter;
overflow: hidden;
border-right: 2px solid orange;
padding-right: 5px;
white-space: nowrap;
margin: 0 auto;
animation:
typing 1s steps(20, end),
cursor 0.5s step-end infinite;
/*animation-delay: 5s;*/
@keyframes typing
from width: 0
to width: 100%
@keyframes cursor
from, to
border-color: transparent;
50%
border-color: orange;
.enter
border: 1px solid transparent;
border-radius: 15px;
min-width: 70px;
background-color: orange;
color: white;
font-size: 16px;
opacity: 1;
animation: clickit 2s ease;
@keyframes clickit
0% opacity:0;
50% opacity:0;
1000% opacity:1;
<body>
<div class="exec">
<h2>
execute portfolio;
</h2>
</div>
<button class="enter">enter</button>
</body>【讨论】：
以上是关于延迟按钮动画CSS [重复]的主要内容，如果未能解决你的问题，请参考以下文章