CSS Animation启动时FontAwesome圆圈溢出绿色框解决方案咨询

解决方案 #

这个偶现的闪现问题是Chrome渲染时序差异导致的：父容器入场动画首帧渲染时，子元素的visibility: hidden规则偶尔还未生效，再加上父容器没有做溢出截断，就会出现图标在框外一闪而过的情况。通过以下修改即可彻底解决：

1. 给餐品卡片容器添加溢出截断（最稳妥的核心修改）

直接把父容器外的所有内容截断，就算渲染时序有异常也不会露出内容：

.meal div {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 0 10px #0000002e;
    margin-bottom: 2rem;
    height: 4rem;
    position: relative;
    padding-left: 1rem;
    padding-top: 1rem;
    animation: fadeIn 0.7s ease-in both, top 0.5s linear;
    cursor: pointer;
    overflow: hidden; /* 新增这一行即可 */
}

2. 优化对勾图标的可见性控制（可选增强方案）

如果想要更稳妥的延迟显示效果，可以修改对勾图标的样式，让它的可见性变化和hover动画时序对齐：

/* 默认状态新增opacity和过渡规则 */
.fa-check-circle {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* hover状态新增opacity和延迟规则 */
.meal div:hover .fa-check-circle {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.1s; /* 和旋转动画的0.1s延迟对齐，避免提前出现 */
}

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