CSS animations not working, while everything else in the css file works-CodePudding

I've been coding a website of mine, and I encountered this annoying problem.

My CSS animations for my 404 page aren't working. All of the other style definitions work though, EXCEPT animations. This mainly leads me to believe that CSS is the problem. However, if you need extra code, I'm willing to provide you it. I'm using Node.JS with express to host the website. Again, all of the CSS works fine EXCEPT the animations. Here's my 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;
}

Edit: Added HTML as well

<!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>

CodePudding user response：

Try using this: I think the problem is that you are running your animation for just one second and also once. Try making its animation-iteration-count infinite.

@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;
}

CodePudding user response：

Your keyframes definition is not being seen because you have a semi colon after the definition before.

Here it is without that ;

@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>