我的 CSS 动画不工作，而其他一切都是答案

【问题标题】：My CSS animations are not working, while everything else is我的 CSS 动画不工作，而其他一切都是
【发布时间】：2022-02-18 19:57:19
【问题描述】：

我一直在编写自己的网站，但遇到了这个非常烦人的问题！

我的 404 页面的 CSS 动画不起作用。但是，所有其他样式定义都可以完美运行，EXCEPT 动画。这让我相信，我的 CSS 有问题。如果您需要额外的代码，我愿意为您提供。我的网站使用 Node.JS 和一个名为 Express 的框架来托管网站。同样，CSS 的其余部分工作正常除了动画。这是我的 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);}
}; */
@keyframes slidein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}

* {
    padding: 0 auto;
    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;
    animation: 1s ease-out slidein;
    -webkit-animation: 1s ease-out slidein;
}
.t404text {
    color: white;
}

这也是我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/resources/style.css">
    <title>le testpage - 404</title>
</head>
<body>
    <div class="content">
        <p class="t404">404</p>
        <p class="t404text">The page you were looking for was, unfortunately, not found.</p>
    </div>
</body>
</html>

有人可以帮帮我吗？

【问题讨论】：

如果代码不太长，可以考虑添加html并制作sn-p
@WalidSiddik 添加了 HTML 代码

标签： html css node.js

【解决方案1】：

没有看到您的关键帧定义，因为之前的定义后面有一个分号。

这里没有那个；

@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);}
}; */

@keyframes slidein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

* {
  padding: 0 auto;
  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;
  filter: blur(5px);
  font-size: calc(50pt + 2vmin);
  color: #00bcd9;
  animation: 1s ease-out slidein;
  -webkit-animation: 1s ease-out slidein;
}

.t404text {
  color: white;
}

<div class="content">
  <p class="t404">404</p>
  <p class="t404text">The page you were looking for was, unfortunately, not found.</p>
</div>

【讨论】：

【解决方案2】：

尝试使用这个：我认为问题在于您只运行了一秒钟的动画，而且还运行了一次。尝试使其动画迭代计数无限。

@keyframes slidein {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  100% {
    opacity: 0;
  }
}

.t404 {
    margin-top:50px;
    transition: opacity .3s;
    filter:blur(5px);
    font-size: calc(50pt + 2vmin);
    color: #00bcd9;
    animation: slidein 2s infinite ease-out;
    -webkit-animation: slidein 2s infinite ease-out;
}

【讨论】：