Question

我希望键入动画完成后显示“输入”按钮。如果我在动画之前设置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>

Answer 1

显示不适用于CSS过渡或动画，请查看此previous post，以更好地理解它。

我建议您转换按钮的opacity或visibility而不是其显示。

@keyframes clickit {
    from { opacity : 0 ; /* Or visibility: hidden; */ }
    to { opacity : 1; /* Or visibility: visible; */ }
}

Answer 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>

Answer 3

显示属性无法设置动画。而且，如果您使用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

3 个答案: