CSS3动画异常求助：Chrome无效果、Firefox闪烁

Hey there! Let's fix those animation issues for your university project—you're off to a great start with the CSS animations, just a few tweaks needed to get the h1 working smoothly across browsers.

问题原因 #

Let's break down what's going wrong:

• Chrome won't display the h1: Your h1 uses percentage-based top positioning, but the <body> element has no default height set. Browsers can't calculate percentage positions correctly without a defined parent height, so your h1 was starting way outside the viewport. Also, your -webkit-animation declaration only specified the name, missing critical properties like duration.
• Firefox flickering/glitches: The keyframe transitions were uneven, and redundant animation property definitions were causing rendering conflicts. You also didn't set animation-fill-mode, so the h1 would jump back to its initial state after the animation ended, creating a flicker.

Fixed Full Code #

Here's the revised code that works across Chrome and Firefox, with smoother animations:

<html>
<head>
    <style>
        /* Set base height for viewport positioning */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        p.intro {
            position: relative;
            /* Simplified animation shorthand with prefixes */
            -webkit-animation: dadestra 3s -1s forwards;
            -moz-animation: dadestra 3s -1s forwards;
            -ms-animation: dadestra 3s -1s forwards;
            -o-animation: dadestra 3s -1s forwards;
            animation: dadestra 3s -1s forwards;
        }

        @keyframes dadestra {
            0% { left: 100%; }
            100% { left: 0%; }
        }

        @-moz-keyframes dadestra {
            0% { left: 100%; }
            100% { left: 0%; }
        }

        @-webkit-keyframes dadestra {
            0% { left: 100%; }
            100% { left: 0%; }
        }

        @-ms-keyframes dadestra {
            0% { left: 100%; }
            100% { left: 0%; }
        }

        @-o-keyframes dadestra {
            0% { left: 100%; }
            100% { left: 0%; }
        }

        h1 {
            color: #fff;
            text-align: center;
            background: #111112;
            text-shadow: 1px 1px 1px red;
            border-radius: 10px; /* Shorthand for all four corners */
            box-shadow: 0px 1px 7px 1px red;
            position: relative;
            /* Complete animation shorthand with prefixes */
            -webkit-animation: hello 4s forwards;
            -moz-animation: hello 4s forwards;
            -ms-animation: hello 4s forwards;
            -o-animation: hello 4s forwards;
            animation: hello 4s forwards;
            z-index: 1;
            margin: 0 0 1rem 0; /* Prevent overlap with paragraphs */
        }

        @keyframes hello {
            0% { 
                top: 100%; /* Start fully below the viewport */
                opacity: 0; /* Smooth fade-in */
            }
            100% { 
                top: 0%; 
                opacity: 1;
            }
        }

        @-moz-keyframes hello {
            0% { 
                top: 100%; 
                opacity: 0;
            }
            100% { 
                top: 0%; 
                opacity: 1;
            }
        }

        @-webkit-keyframes hello {
            0% { 
                top: 100%; 
                opacity: 0;
            }
            100% { 
                top: 0%; 
                opacity: 1;
            }
        }

        @-ms-keyframes hello {
            0% { 
                top: 100%; 
                opacity: 0;
            }
            100% { 
                top: 0%; 
                opacity: 1;
            }
        }

        @-o-keyframes hello {
            0% { 
                top: 100%; 
                opacity: 0;
            }
            100% { 
                top: 0%; 
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <h1>Welcome guest!</h1>
    <p class="intro">bla bla bla bla</p>
    <p class="intro">bla bla bla</p>
</body>
</html>

Key Changes Explained #

• Viewport height setup: Added height: 100% to html and body so percentage-based positioning works correctly, fixing the Chrome display issue.
• Animation shorthand: Combined scattered animation properties into clean shorthand declarations, ensuring all browser prefixes have complete settings.
• animation-fill-mode: forwards: Makes the element stay in its final animation state instead of jumping back, eliminating Firefox flickering.
• Smarter h1 keyframes: Changed the initial position to top: 100% (fully off-screen below) and added an opacity fade for a smoother, more predictable animation.
• Cleaned up syntax: Simplified border-radius to its shorthand form and added margin to prevent layout overlap.

内容的提问来源于stack exchange，提问作者JustAnotherSimpleProgrammer__