Question

我目前正在制作一个看起来有点像 1980 年游戏的小游戏。对于这种特殊的风格，我想为标题添加动画，上面写着“欢迎使用 Typer Writer！” （当然没有过渡）。所以我想我可以做一个闪烁动画，但它并没有像我想象的那样奏效。有人可以帮帮我吗？我还在这里查看了这个问题：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>

Answer 1

不幸的是，我们无法为 display 属性设置动画，我已更改为不透明度，请检查代码段：

* {
            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>

没有过渡的关键帧动画

1 个答案: