CSS伪元素@keyframes动画失效？如何实现居中与响应式布局

叉号动画失效原因 #

• 你的cross动画逻辑是修改border-color属性，但叉号的两条斜线是通过伪元素的background-color绘制的，伪元素本身没有设置border，动画修改的属性完全不匹配，自然没有效果。
• 伪元素设置了left偏移，但父元素.x没有开启定位，伪元素的偏移规则不生效，初始位置本身就存在偏移错误。
• 你给.x元素本身也绑定了cross动画，但.x容器本身既无背景也无边框，动画绑定在容器上属于无效设置。

居中实现方法 #

给所有td单元格添加flex布局属性，直接让子元素水平垂直居中，不需要给X/O元素写死偏移值：

td {
  display: flex;
  align-items: center;
  justify-content: center;
}

删掉.x里写死的right: 32px、top: 32px属性，避免干扰居中效果。

响应式适配修改 #

把固定像素值替换为相对视口的单位，用clamp()限制尺寸范围，避免在过小/过大屏幕上显示异常：

• td宽高改为clamp(60px, 22vmin, 120px)，自动随视口大小缩放，最小60px最大120px
• 标题的margin-bottom从固定10rem改为5vh，小屏幕下不会留过多空白
• X/O元素的尺寸改为相对父元素的百分比，随单元格大小自动适配

修复后完整代码 #

CSS部分 #

h1 {
    text-align: center;
    margin-bottom: 5vh;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

table {
    margin: auto;
    border-collapse: collapse;
}

td {
    width: clamp(60px, 22vmin, 120px);
    height: clamp(60px, 22vmin, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical {
    border-left: 2px solid black;
    border-right: 2px solid black;
}

.horizontal {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

.o {
    height: 40%;
    width: 40%;
    border: 3px solid white;
    border-radius: 50%;
}

.x {
    position: relative;
    width: 40%;
    height: 40%;
}

.x:before,
.x:after {
    position: absolute;
    left: 50%;
    top: 0;
    content: '';
    height: 100%;
    width: 3px;
    background-color: white;
    transform-origin: center;
}

.x:before {
    transform: translateX(-50%) rotate(45deg);
}

.x:after {
    transform: translateX(-50%) rotate(-45deg);
}

#two:before,
#two:after {
    animation: cross 2s 1s;
    animation-fill-mode: forwards;
}

#one {
    animation: circle 2s 1s;
    animation-fill-mode: forwards;
}


#three {
    animation: circle 2s 3s;
    animation-fill-mode: forwards;
}

#five {
    animation: circle 2s 5s;
    animation-fill-mode: forwards;
}

#seven {
    animation: circle 2s 7s;
    animation-fill-mode: forwards;
}

@keyframes circle {
    from {
        border-color: white;
    }

    to {
        border-color: black;
    }
}

@keyframes cross {
    from {
        background-color: white;
    }

    to {
        background-color: red;
    }
}

HTML部分（无需修改，和原有代码一致即可） #

<h1>Thinking outside the box</h1>
<table>
    <tr>
        <td>
            <div class="x" id="two"></div>
        </td>
        <td class="vertical">
            <div class="o" id="one"></div>
        </td>
        <td>
            <div class="x"></div>
        </td>
    </tr>
    <tr>
        <td class="horizontal">
            <div class="x"></div>
        </td>
        <td class="vertical horizontal">
            <div class="o" id="three"></div>
        </td>
        <td class="horizontal">
            <div class="x" id="four"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="o" id="five"></div>
        </td>
        <td class="vertical">
            <div class="x"></div>
        </td>
        <td>
            <div class="o" id="seven"></div>
        </td>
    </tr>
</table>

额外优化点：给table加了border-collapse: collapse避免边框重叠变粗，调整了边框和线条粗细，动画时长统一为2s节奏更舒服，X/O尺寸调整为单元格的40%视觉更协调。

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