[分享]css两个动画同时开始

在CSS中，我们可以利用不同的属性值和关键帧来创建各种各样的动画。而通过CSS实现同时开始的两个动画也是非常简单的。 .box { animation: move 3s ease forwards, ...

在CSS中，我们可以利用不同的属性值和关键帧来创建各种各样的动画。而通过CSS实现同时开始的两个动画也是非常简单的。

 .box {
        animation: move 3s ease forwards, colorChange 2s ease 1s forwards;
    }

    @keyframes move {
        from {transform: translateX(0);}
        to {transform: translateX(300px);}
    }
    
    @keyframes colorChange {
        from {color: black;}
        to {color: white;}
    } 

在这里，我们使用了animation属性对.box进行动画处理，其中move和colorChange分别代表两个动画的名称。可以看到，在animation的属性值中，我们使用“，”分割了两个动画，这样可以确保两个动画同时开始。

同时，我们还需要注意到第一个动画的forwards属性，这个属性的作用是让动画结束后元素保持在动画的最后一帧状态，而不是返回到初始状态。这样做可以确保两个动画结束时的状态一致，使整个页面更加流畅自然。

除此之外，我们在第二个动画中的同时使用了delay属性，这样可以确保第二个动画在第一个动画完成后1秒钟才开始执行，可以给用户留下更好的视觉效果。

通过以上的代码和解释，相信大家已经掌握了如何在CSS中实现同时开始的两个动画啦！赶快试试吧！