CSS实现Logo从下到上动画失败，寻求问题排查方案

动画未生效的核心原因 #

你的CSS代码使用了嵌套选择器（span内部嵌套span），但标准CSS并不支持这种语法——嵌套是Sass/LESS等预处理器的特性。浏览器无法解析嵌套规则，因此内层span的动画样式完全不生效。

具体修复步骤 #

1. 修复普通CSS代码 #

将嵌套选择器改为标准CSS写法，让浏览器能正确解析：

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样式 */
span {
    overflow: hidden;
    display: block;
}

/* 内层span样式，改为独立选择器 */
span span {
    display: block;
    animation: spanFadeIn 500ms ease-in-out;
}

2. Sass使用异常的解决 #

若想用Sass实现嵌套语法，必须先将.scss/.sass文件编译为标准CSS文件，再引入到HTML中。直接引入未编译的Sass文件，浏览器无法识别，会导致页面样式完全失效。

常用编译方式：

• VSCode安装Live Sass Compiler插件，实时自动编译
• 命令行编译（需安装Node.js和sass包）：sass input.scss output.css

3. 可选优化：避免选择器冲突 #

给Logo容器添加专属类名，避免影响页面其他span元素，代码更清晰：

HTML修改：

<div class="logo-wrapper">
    <img src="img/Arrow_logo.png">
</div>

对应CSS：

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

.logo-wrapper {
    overflow: hidden;
    display: block;
}

.logo-wrapper img {
    display: block;
    animation: logoFadeIn 500ms ease-in-out;
}

内容的提问来源于stack exchange，提问作者Wireless