'My CSS animations are not working, while everything else is

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

My CSS animations, for my 404 page aren't working. All of the other style definitions work perfectly though, EXCEPT animations. This leads me to believe, that something is wrong with my CSS. If you need extra code, I'm willing to provide you it. My website is using Node.JS with a framework called Express to host the website. Again, the rest of the CSS works fine EXCEPT the animations. Here is the hellhole that is 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;
}

Here's my 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>

Can someone help me please?

htmlcssnode.js


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arun Bohra

Related Questions