Keyframe Animation with no transition

Question

I'm currently making a little game that looks a bit like a game from 1980. For that particular style I wanted to animate the headline where it says "Welcome To Typer Writer!" (without transition of course). So I was thinking that I could do a flicker animation but it didn't work out the way I thought. Can someone please help me? I also looked at this question here: CSS Animations - change a property without a transition?

* {
            margin: 0;
            padding: 0;
            font-family: 'Press Start 2P', cursive;
            overflow: hidden;
            user-select: none;
        }

        #startScreen {
            background: #000;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            text-align: center;
        }

        #startScreen h1 {
            font-size: 50px;
            margin: 1em;
            animation: 1s flickerText infinite;
            animation-timing-function: step-end;
        }

        #startScreen #startGame {
            background: #000;
            color: #fff;
            padding: 1em;
            border: 1px solid #fff;
            cursor: pointer;
        }
        
        @keyframes flickerText {
            0%   { display: none; }
            50% { display: block; }
        }

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

<div id="startScreen">
        <h1>Welcome To Typer Writer!</h1>
        <button id="startGame">Start New Game!</button>
    </div>

I can't see the animation, but, have you tried to set the time to 0s? — Hoch, Jul 29 '21 at 12:25

score 1 · Accepted Answer · answered Jul 29 '21 at 12:33

Unfortunately we can't animate the display property, i've changed to opacity, check the snippet:

* {
            margin: 0;
            padding: 0;
            font-family: 'Press Start 2P', cursive;
            overflow: hidden;
            user-select: none;
        }

        #startScreen {
            background: #000;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            text-align: center;
        }

        #startScreen h1 {
            font-size: 50px;
            margin: 1em;
            animation: 1s flickerText infinite;
            animation-timing-function: step-end;
        }

        #startScreen #startGame {
            background: #000;
            color: #fff;
            padding: 1em;
            border: 1px solid #fff;
            cursor: pointer;
        }
        
        @keyframes flickerText {
            0%   { opacity: 0; }
            50% { opacity: 1; }
        }

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

<div id="startScreen">
        <h1>Welcome To Typer Writer!</h1>
        <button id="startGame">Start New Game!</button>
    </div>

Perfect! Thank you so much. I will accept it in 2 minutes – Jul 29 '21 at 12:35 — , Jul 29 '21 at 12:35

Keyframe Animation with no transition

1 Answers1