CSS动画在浏览器检查器可见但页面加载时未触发问题

问题根源分析 #

• 动画关键帧无变化：slideIn动画的from和to阶段transform: translateX(300px)完全相同，没有位移差异，导致动画视觉上无效果。
• 缺失核心动画属性：内联样式仅设置了动画名称、延迟和时间函数，但未指定animationDuration（动画时长），浏览器无法执行无时长的动画；同时建议添加animationFillMode来保留动画结束后的状态。
• 随机延迟计算错误：Math.random(4)写法错误，Math.random()不接受参数，正确写法是Math.random() * 4生成0-4的随机数，再乘以100得到0-400ms的随机延迟。

修复后的Item组件代码 #

function Item(props) {
    return (
        <div
            className="ItemCard"
            style={{
                animationName: "slideIn",
                // 修正随机延迟计算逻辑
                animationDelay: `${Math.random() * 4 * 100}ms`,
                animationTimingFunction: "ease-in",
                // 添加动画时长，必选属性
                animationDuration: "0.5s",
                // 保留动画结束后的最终状态
                animationFillMode: "forwards"
            }}>
            <img
                className="ItemPicture"
                src={props.picture}
                alt={props.name}></img>
            <p className="ItemName">{props.name}</p>
            <p className="ItemPrice">
                <strong>${props.price}</strong>
            </p>
            <a
                className="BuyNow-link"
                href={props.url}
                target="_blank"
                rel="noreferrer">
                <button className="BuyNow">Buy Now!</button>
            </a>
        </div>
    );
}
export default Item;

修复后的Item.css代码 #

.ItemCard{
    display: flex;
    flex-direction: column;
    flex-basis: 15vw;
    background-color: White;
    height: 40vh;
    padding: 15px;
    margin: 15px;
    align-items: center;
    overflow:hidden;
    outline: solid black 1px;
    box-shadow: 0 0 .6em .1em black;
    border-radius: 2px;
    /* 设置初始状态与动画起始一致，避免页面加载时的闪烁 */
    opacity: 0;
    transform: translateX(300px);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(300px);
    }

    to {
        opacity: 1;
        /* 修改为translateX(0)，实现从右侧滑入的效果 */
        transform: translateX(0);
    }
}

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