提问者:小点点

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


我有一些@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%开始,这样所有内容都会一起淡入淡出。


共1个答案

匿名用户

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