delayed button animation CSS

Question

I want the "enter" button to display after the typing animation has been completed. If I set display: none before the animation, it won't display even after the animation completes. I think the problem lies in the "@keyframe clickit" but I can't figure out what it is.

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

@keyframes clickit { from {visibility: hidden;} to {visibility: visible;} } this doesn't restore its visibility after 1 second. — Talha Munir, Mar 25 '19 at 11:27

score 3 · Answer 1 · answered Mar 25 '19 at 11:25

3

Display does not work with CSS transitions or animations, check out this previous post to understand it a bit better.

I suggest you transition the opacity or the visibility of the button instead of its display.

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

answered Mar 25 '19 at 11:25

Jake

1,398
1
9
19

Am I supposed to set opacity: 0; in ".enter" class before this? – Talha Munir Mar 25 '19 at 11:29
okay yes, I had to and it works now. Thanks – Talha Munir Mar 25 '19 at 11:31
No problem, glad I could help – Jake Mar 25 '19 at 12:12

score 3 · Accepted Answer · answered Mar 25 '19 at 11:32

I just update your code with few CSS, I hope it'll help you out. Thanks

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

score 2 · Answer 3 · answered Mar 25 '19 at 11:37

Display property cant be animated. And if you use animation-delay:1s then the button will still show for 1s before animations starts. try below code.

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

delayed button animation CSS

3 Answers3