Html 页面加载时，关键帧动画不在内部Div上工作

我试图使用这个问题的解决方案：

我的HTML和CSS包括以下内容：

@关键帧向右滑动{ 0% { 转化：转化率100%； } 100% { transform:translateX0； } } .公告容器{ 位置：固定； 顶部：80px； 右：20px； z指数：1001； 显示器：flex； 弯曲方向：立柱； 宽度：300px； /*动画：1s从右侧滑出1s幻灯片*/ } .announcments-1{ 动画：1s从右侧滑出1s幻灯片； } .公告-2{ 边缘顶部：15px； } .公告标题{ 背景色：1481C3； 颜色：ffffff； 字体系列：Proxima Nova Bold； 填充：7px 10px； } .公告关闭{ 位置：绝对位置； 右：5px； 宽度：24px； 高度：36px； 光标：指针； 不透明度：.85； } .公告关闭：悬停{ 不透明度：1； } .公告关闭：：之前， .announces关闭：：之后{ 内容：； 宽度：24px； 高度：2倍； 背景：白色； 位置：绝对位置； 顶部：7px； 左：0； } .announces关闭：：之前{ 变换：旋转-45度； } .announces关闭：：之后{ 变换：旋转45度； } 2学校公告 1行政公告

---

首先，它可能看起来很奇怪，但是样式表中有一个输入错误。其中声明了announcements-1，但使用announcements-1对其进行了样式设置

因此，做出正确的决定将给你想要的：

@关键帧向右滑动{ 0% { 转化：转化率100%； } 100% { transform:translateX0； } } .公告容器{ 位置：固定； 顶部：80px； 右：20px； z指数：1001； 显示器：flex； 弯曲方向：立柱； 宽度：300px； /*动画：1s从右侧滑出1s幻灯片*/ } .公告-1{ 动画：1s从右侧滑出1s幻灯片； } .公告-2{ 边缘顶部：15px； } .公告标题{ 背景色：1481C3； 颜色：ffffff； 字体系列：Proxima Nova Bold； 填充：7px 10px； } .公告关闭{ 位置：绝对位置； 右：5px； 宽度：24px； 高度：36px； 光标：指针； 不透明度：.85； } .公告关闭：悬停{ 不透明度：1； } .公告关闭：：之前， .announces关闭：：之后{ 内容：； 宽度：24px； 高度：2倍； 背景：白色； 位置：绝对位置； 顶部：7px； 左：0； } .announces关闭：：之前{ 变换：旋转-45度； } .announces关闭：：之后{ 变换：旋转45度； } 2学校公告 1行政公告