延迟按钮动画CSS [重复]答案

【问题标题】：delayed button animation CSS [duplicate]延迟按钮动画CSS [重复]
【发布时间】：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

标签： html css

【解决方案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>

【讨论】：