CSS3兩個動畫順序銜接播放

本文轉載自查看原文 2015-08-11 17:10 4582 動畫/ HTML5+CSS3/ CSS3

問題描述：

第一個動畫先播放，播放完成后，第二個動畫緊接着播放。

解決辦法：

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js如何銜接css3的多個@keyframes動畫？ CSS顛倒兩個元素的顯示順序 css3動畫應用-音樂唱片旋轉播放特效 css3 動畫的播放、暫停和重新開始 css3，transition，animation兩種動畫實現區別 CSS3實現動畫的兩種方式相鄰兩個生產計划之間的銜接問題 css3動畫如何解決動畫的播放、暫停和重新開始如何停止CSS3的動畫？ CSS3 循環動畫