CSS3两个动画顺序衔接播放

来源：互联网发布：学安卓好还是java好编辑：程序博客网时间：2024/05/01 00:07

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>

0 0