[分享]css3指定多个动画

CSS3给前端开发带来了很多高级特性，其中之一便是可以指定多个动画来让元素更加生动。想要指定多个动画只需要将多个动画的属性用逗号隔开即可，以下是一个例子：animation: move 2s ease...

CSS3给前端开发带来了很多高级特性，其中之一便是可以指定多个动画来让元素更加生动。

想要指定多个动画只需要将多个动画的属性用逗号隔开即可，以下是一个例子：

animation: move 2s ease-in-out, scale 1.5s 1s ease-in-out; 

上面的代码指定了两个动画，一个是名为“move”的动画，在2秒内以“ease-in-out”的方式移动元素位置；还有一个是名为“scale”的动画，在1.5秒内以“ease-in-out”的方式缩放元素大小，并且等待1秒后再执行。

另外，也可以通过在每一个动画属性后面指定动画执行的时间、延迟和动画函数来精确控制动画的效果：

animation-name: move, scale;
animation-duration: 2s, 1.5s;
animation-delay: 0s, 1s;
animation-timing-function: ease-in-out, ease-in-out; 

上面的代码与之前的例子效果相同，只不过是每个属性都单独指定了一遍。

总体来说，指定多个动画时需要注意的就是将多个动画的属性用逗号隔开即可。同时也需要根据具体情况来选择是使用一个animation属性来指定多个动画还是使用多个animation-*属性来单独指定每个动画的参数。