html - CSS 无法为棋盘制作动画？

Question

我制作了一个井字棋盘并试图产生某种发光效果。但是，当我使用关键帧制作动画时，我删除的那一侧也会显示，而且动画不均匀。

td{
    width:115px;
    height:115px;
    border: 4px solid rgba(0, 191, 255,0.3); 
    animation: borderGlow 1s ease-in-out infinite alternate;
}
table{
    border-collapse: collapse;
    position: absolute;
    top:25%;
}
table tr:first-child td{
    border-top:none;
}
table tr:last-child td{
    border-bottom:none;
}
table tr td:first-child{
    border-left:none;
}
table tr td:last-child{
    border-right:none;
}

@keyframes borderGlow{
    from{
        border: 4px solid rgba(0, 191, 255,0.3);  
    }
    to{
        border: 4px solid rgba(0, 191, 255,1);
    }
}

<table>
            <tr>
                <td class="cell" id="0">O</td>
                <td class="cell" id="1">X</td>
                <td class="cell-2" id="2">O</td>
            </tr>
            <tr>
                <td class="cell-2" id="3">O</td>
                <td class="cell-2" id="4">O</td>
                <td class="cell" id="5">X</td>
            </tr>
            <tr>
                <td class="cell" id="6">X</td>
                <td class="cell" id="7">O</td>
                <td class="cell" id="8">X</td>
            </tr>
        </table>

Answer 1

无需为动画指定所有边框属性(因为您正在用它覆盖您的 none 值)，只需颜色就足够了:

@keyframes borderGlow {
    from {
        border-color: rgba(0, 191, 255, 0.3);  
    }
    to {
        border-color: rgba(0, 191, 255, 1);
    }
}

此外，动画在我身边看起来非常“统一”。或许，您可以使用缓动来获得更线性的效果。