基于Node.js+Express的网站404页面CSS动画失效其余样式正常

API 探路者

2026-10-1

问题排查结果

你的动画不生效是两个核心原因导致的：

没有设置animation-fill-mode: forwards：CSS动画默认运行结束后会回到元素的初始状态，你的.t404初始设置了opacity: 0，动画跑完就会变回透明，看起来就像动画压根没运行
你当前写的@keyframes slidein只定义了opacity的过渡，如果你要同时实现位移、模糊的动画效果，需要把对应的属性也加到关键帧里
补充冗余问题清理建议：你的代码里@font-face、注释掉的旧keyframes后面多了多余的分号，*选择器里的padding: 0 auto是无效语法（padding不支持auto值），清理这些内容可以避免浏览器解析异常

修正后的CSS代码

@font-face {
    font-family: 'Consolas';
    src: url("/fonts/consolas.woff") format("woff");
}

@keyframes slidein {
    0% {
        margin-top:50px;
        opacity:0;
        filter:blur(5px);
    }
    100% {
        margin-top:60px;
        opacity:1;
        filter:blur(0px);
    }
}

* {
    padding: 0;
    margin: 0 auto;
}

body {
    background-color: #232323;
    color:white;
    font-family: 'Consolas';
}

.content {
    margin: auto;
    text-align: center;
    width: 100%;
    height: 100%;
}

.t404 {
    margin-top:50px;
    opacity:0;
    filter:blur(5px);
    font-size: calc(50pt + 2vmin);
    color: #00bcd9;
    /* 增加forwards配置让动画结束后停在最终状态 */
    animation: slidein 1s ease-out forwards;
    -webkit-animation: slidein 1s ease-out forwards;
}
.t404text {
    color: white;
}