• 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>
  • 相关阅读:
    IEEE 网址
    知乎上非常棒的机器学习专栏
    怎样认识比你优秀的人并和他们成为朋友?
    影藏铜皮,显示原点与更改
    PCB检查事项,生成钻孔表
    布局-同样模块复用
    制作DIP Package及DIP焊盘制作,不规则焊盘制作
    制作SMD Package及SMD焊盘制作
    导入网络表
    导入DXF文件
  • 原文地址:https://www.cnblogs.com/tnnyang/p/4721574.html
一二三 - 开发者的网上家园