Javascript 我可以使用css设置div的innerHTML动画吗？

我在html文件中有这些“cell”div：

<div data-spaces class="cell"></div>

---

如何制作CSS动画，以便在innerHTML更改时，可以像上面的链接一样放大？

您应该在innerHTML更新后尝试添加一个新类。因此，在添加类时，动画将正确启动

.cell.animate{
动画：抖动0.5s；
}

const gridSpaces=document.queryselectoral（“[data spaces]”）；
for（设i=0；i{
网格空间[i].innerHTML=“X”；
gridSpaces[i].classList.add（“动画”）；
});
}

您不能在CSS中选择文本节点并对其使用动画。但如果可以控制单元格的

innerHTML

，则可以围绕单元格内容创建包装器元素：

const gridSpaces=document.queryselectoral（“[data spaces]”）；
for（设i=0；i{
网格空间[i].innerHTML=“X”；
});
}

@关键帧抖动{
10%, 90% {
转换：translate3d（-1px，0，0）；
}
20%, 80% {
变换：translate3d（2px，0，0）；
}
30%, 50%, 70% {
变换：translate3d（-4px，0，0）；
}
40%, 60% {
变换：translate3d（4px，0，0）；
}
}
.细胞{
边框：1px纯色灰色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：40px；
高度：40px；
}
.内容{
动画：抖动0.5s；
}

这很有效，谢谢。我让我的X震动了。关于如何设置CSS缩放动画的任何线索？在此处找到了缩放动画的答案：

const gridSpaces = document.querySelectorAll("[data-spaces]");

for(let i = 0; i < gridSpaces.length; i++) {

    gridSpaces[i].addEventListener("click", () => {

        gridSpaces[i].innerHTML = "X";
    });
}

.cell {
    animation: shake 0.5s;
}