SCSS @for循环实现p标签依次缩放动画问题求助

你的代码无法触发动画主要有三个问题：缺少动画时长、延迟计算语法错误、初始状态未明确。以下是修复后的完整代码：

修复后的SCSS代码 #

section{
    padding-top: 200px;
    .scP{
        p{
            text-align: center;
            padding: 30px 0px;
            // 明确初始状态，和动画结束状态一致
            opacity: 1;
            transform: scale(1);
            @for $i from 1 through 3 {
                &:nth-child(#{$i}) {
                    animation-name: expand;
                    animation-timing-function: linear;
                    animation-fill-mode: forwards;
                    // 添加动画时长，否则动画不会执行
                    animation-duration: 1s;
                    // 计算延迟：第1个p延迟0s，第2个0.5s，第3个1s，间隔0.5秒
                    animation-delay: ($i - 1) * 0.5s;
                }
            }
        }
    }
}
@keyframes expand{
    50%{
        transform: scale(0.8);
    }
    // 100%状态和初始状态一致，可省略（保留也不影响）
    100%{
        transform: scale(1);
    }
}

关键修复点说明 #

• 添加animation-duration：这是动画执行的核心前提，没有指定时长的动画会被浏览器直接忽略，这里设置为1秒能让缩放效果清晰呈现
• 修正延迟计算逻辑：原代码$i+(-0.7s)的语法错误，改为($i - 1) * 0.5s后，能精准实现每个p标签依次延迟0.5秒触发动画的需求
• 明确初始状态：给p标签设置默认的opacity和transform，避免浏览器默认值导致动画起始状态不统一
• 简化动画关键帧：因为初始状态已经是scale(1)和opacity:1，所以动画关键帧里只需保留50%的缩小状态即可，100%状态可省略，浏览器会自动过渡回初始状态

HTML代码无需修改，保持你原有的结构即可。

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