css怎么同时做两个动画

CSS是网页设计中不可缺少的一部分，可以为网页注入各种各样的效果和动画。经常会遇到需要同时做两个动画的情况，那么该如何实现呢？

    .animation{
        animation-name: move,fade;
        animation-duration: 2s,1s;
        animation-timing-function: ease-in-out,linear;
        animation-delay: 0s,2s;
        animation-iteration-count: 1,infinite;
        animation-direction: alternate,normal;
    }

    @keyframes move{
        from{transform: translateX(0);}
        to{transform: translateX(100px);}
    }

    @keyframes fade{
        from{opacity: 1;}
        to{opacity: 0.2;}
    }

上面的代码演示了如何同时做移动和淡出两个动画效果。首先将元素的class设置为animation，然后在animation-name属性中用逗号分隔开两个动画的名称：move和fade。接着分别设置两个动画的各种属性，例如duration、 timing-function、delay、iteration-count和direction。最后在keyframes中定义两个动画的具体效果，其中一个实现元素从左到右的移动，另外一个实现元素的透明度从1到0.2的变化。

需要注意的是，做两个动画时要特别留意多个动画之间的配合和时间协调。如果出现问题，可能会导致动画不流畅或者失去效果。因此，在使用多个动画同时实现效果时，一定要认真掌握CSS动画的细节，做好各种调试和优化。