将多个CSS@keyframes动画锁定在一起

Question

我有一些@keyframes动画和相关的CSS类名。例如，类似于：

.fade {
    animation: fade 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes fade {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

如果我显示多个应用了.fade类的元素，有没有办法将它们锁定在一起，使它们在动画关键帧中共享相同的位置？

例如，如果我从一个 开始，并且碰巧在第一个在动画中达到50%时添加了第二个，那么我希望第二个从50%开始，这样所有内容都会一起淡入淡出。

Answer 1

给他们唯一的类名或ID，这样你就可以单独地把他们作为目标，而不是作为一个群体，不是更容易吗？通过这种方式，您可以告诉#newname在适当的关键帧50%时插入，而不会引起其他元素的问题。我可能误会了你的问题。我是一个初学者，所以如果我误导了你，我很抱歉，希望没有…我真的希望我能帮到你。祝你好运！