如何暂停动画并同时闪烁?

Question

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

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

有人可以帮助我吗？

谢谢

Answer 1

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

这是你要找的吗？

.box {
width: 50px;
height: 50px;
background-color: orangered;
transform: translate(50px);
animation: move 5s;
}
@keyframes move {
0% {
transform: translate(50px);
opacity: 1;
}
50% {
transform: translate(430px);
opacity: 1;
}

52% { transform: translate(430px); opacity: 0; }
54% { transform: translate(430px); opacity: 1; }
56% { transform: translate(430px); opacity: 0; }
58% { transform: translate(430px); opacity: 1; }
60% { transform: translate(430px); opacity: 1; }

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

<div class="box"></div>