Animation in CSS for logo that goes from bottom to top

March 20, 2023

Hi i try to get animation on my index.html with my style.css but it does not work and i dont understood why.

Here’s my code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chrome">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Arrow</title>
</head>

<body>
    <span><span><img src="img/Arrow_logo.png"></span></span>

    <div class="affiche">
        <img src="img/arrow-season-5-poster.jpg" width="34%">
    </div>

    <div class="navigation">
        <button><a href="pages/page2.html">Flash</a></button>
    </div>
</body>

</html>

body {
    background: #333;
}

.affiche {
    background-color: #333;
    color: #fff;
    text-align: center;
}

.navigation {
    background-color: #333;
    color: #666;
    text-align: center;
}

@keyframes spanFadeIn {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}

span {
    overflow: hidden;
    display: block;

    span {
        display: block;
        animation: spanFadeIn 500ms ease-in-out;
    }
}

I tried in sass but it broke everything in my html.

>Solution :

You are using SASS code in CSS file (which is incorrect), instead of nesting spans use the notation below:

body {
    background: #333;
}

.affiche {
    background-color: #333;
    color: #fff;
    text-align: center;
}

.navigation {
    background-color: #333;
    color: #666;
    text-align: center;
}

@keyframes spanFadeIn {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}

span {
    overflow: hidden;
    display: block;
}

span span {
    display: block;
    animation: spanFadeIn 500ms ease-in-out;
}