CSS不能动画板吗？

Question

我已经制作了一个tic tac toe板，并试图产生某种发光效果。但是当我使用关键帧进行动画时，我删除的那一侧也会显示出来，而且动画也是不一致的。

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);
    }
}

而且，在我身边，动画看起来相当“统一”。也许，你可以尝试放松，以达到更线性的效果。