问题描述：
第一个动画先播放，播放完成后，第二个动画紧接着播放。
解决办法：
1. 将第二个的延迟时间（animation-delay） 设置成第一个的持续时间( animation-duration );
2. 多个动画应用时用逗号分隔开;
此时，CSS3的动画代码就要分开写了，不能再简写了，诸如animation:rotate-back 10000ms linear infinite这样的简写就是不行的，因为在同一代码中要加入两个动画，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{background:#666;} img { position:absolute;left:200px;top:100px; animation-name:myfirst, rotate-back; animation-duration:1000ms, 10000ms; animation-timing-function:linear, linear; animation-delay:0, 1000ms; animation-iteration-count:1, infinite; animation-fill-mode:forwards, none; -moz-animation-name:myfirst, rotate-back; -moz-animation-duration:1000ms, 10000ms; -moz-animation-timing-function:linear, linear; -moz-animation-delay:0, 1000ms; -moz-animation-iteration-count:1, infinite; -moz-animation-fill-mode:forwards, none; -ms-animation-name:myfirst, rotate-back; -ms-animation-duration:1000ms, 10000ms; -ms-animation-timing-function:linear, linear; -ms-animation-delay:0, 1000ms; -ms-animation-iteration-count:1, infinite; -ms-animation-fill-mode:forwards, none; -o-animation-name:myfirst, rotate-back; -o-animation-duration:1000ms, 10000ms; -o-animation-timing-function:linear, linear; -o-animation-delay:0, 1000ms; -o-animation-iteration-count:1, infinite; -o-animation-fill-mode:forwards, none; -webkit-animation-name:myfirst, rotate-back; -webkit-animation-duration:1000ms, 10000ms; -webkit-animation-timing-function:linear, linear; -webkit-animation-delay:0, 1000ms; -webkit-animation-iteration-count:1, infinite; -webkit-animation-fill-mode:forwards, none; } /*myfirst*/ @keyframes myfirst { from {top:-50px;} to {top:100px;} } @-moz-keyframes myfirst { from {top:-70px;} to {top:100px;} } @-webkit-keyframes myfirst { from {top:-300px;} to {top:100px;} } @-ms-keyframes myfirst { from {top:-300px;} to {top:100px;} } @-o-keyframes myfirst { from {top:-300px;} to {top:100px;} } /*rotate-back*/ @keyframes rotate-back { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes rotate-back { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes rotate-back { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-ms-keyframes rotate-back { from { -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes rotate-back { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(-360deg); transform: rotate(-360deg); } } </style> </head> <body> <img src="images/s_star.png" alt="" class="s_star"> </body> </html>