CSS3两个动画顺序衔接播放

时间：2023-03-08 17:42:45

问题描述：

第一个动画先播放，播放完成后，第二个动画紧接着播放。

解决办法：

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="data:images/s_star.png" alt="" class="s_star">

</body>

</html>

相关文章