Html 如何暂停动画并同时闪烁？

您好，我有一个包含内容的容器。 我的内容是带有动画的文本：

animation: move 15s linear infinite;

我的关键帧：

@keyframes move {
  0% {
    transform: translate(50px);
    opacity: 1;
  }
 
  50% {
    transform: translate(430px);
    opacity: 1;
    
  }
 
  100% {
    opacity: 1;
    transform: translate(50px);
  }
}

在容器的50%端，我希望它暂停一两秒并闪烁，然后它可以按照我在这里给出的说明进行操作：

(100% {
        opacity: 1;
        transform: translate(50px);
      })

有人能帮我吗

---

谢谢

您可以在关键帧中使用多个步骤来创建闪烁效果。如果在执行此操作时希望元素保持原位，只需确保添加相同的位置（在本例中为

transform:translate（430px）；

）

这就是你要找的吗

.box{
宽度：50px；
高度：50px；
背景颜色：橙色；
转换：转换（50px）；
动画：移动5s；
}
@关键帧移动{
0% {
转换：转换（50px）；
不透明度：1；
}
50% {
转换：转换（430px）；
不透明度：1；
}
52%{变换：平移（430px）；不透明度：0；}
54%{变换：平移（430px）；不透明度：1；}
56%{变换：平移（430px）；不透明度：0；}
58%{变换：平移（430px）；不透明度：1；}
60%{变换：平移（430px）；不透明度：1；}
100% {
不透明度：1；
转换：转换（50px）；
}
}

---

动画文本通常被认为是一个坏主意，当有很多动画时，它总是令人讨厌