
一个元素连续执行多个动画
示例:
.demo {
-webkit-animation-name: bounceInLeft1, bounce1;
-webkit-animation-duration: 2s, 1.5s;
-webkit-animation-timing-function: ease, linear;
-webkit-animation-delay: 5.2s, 7.2s;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards, none;
animation-name: bounceInLeft1, bounce1;
animation-duration: 2s, 1.5s;
animation-timing-function: ease, linear;
animation-delay: 5.2s, 7.2s;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, none;
}
原理:同时设置多个动画,利用延时实现动画效果