欢迎使用CSDN-markdown编辑器 

<!DOCTYPE HTML>
<html>
    <head>
        <title>动画</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <style>
            div
            {
                border:1px solid black;
                width:200px;
                height:100px;
                position:relative;
            }
            div img
            {
                position:absolute;                
            }
            #step_2,#step_3
            {
               visibility:hidden;
               z-index:10;
            }
            /*定义动画*/
            @keyframes jump  
            {
                from   { left:5px; top:0px; }
                10%  { left:15px; top:15px; }
                15%  { left:15px; top:35px; }
                20%  { left:15px; top:55px; }
                25%  { left:15px; top:75px; }
                30%  { left:20px; top:85px; }
                35%  { left:20px; top:75px; }
                40%  { left:20px; top:55px; }
                45%  { left:20px; top:35px; }
                50%  { left:30px; top:25px; }
                55%  { left:30px; top:35px; }
                60%  { left:40px; top:25px;transform:scale(0.5); }
                70%  { left:40px; top:40px; transform:scale(0.4);}
                80%  { left:40px; top:50px;transform:scale(0.3); }
                90%  { left:50px; top:70px;transform:scale(0.2); }
                to { left:50px; top:35px;transform:scale(0.1);  }
            }
            @keyframes image_show  
            {
                from   { left:40px; top:25px;visibility:visible;opacity:0.2;transform:scale(0.5);}
                50%   { opacity:0.5;}
                70% {left:40px; top:25px;visibility:visible;opacity:1;transform:scale(1);}
                to {left:40px; top:25px;visibility:visible;opacity:0;}
            }
            @keyframes image_end  
            {
                from   { left:40px; top:25px;visibility:visible;opacity:0.2;}
                50%   { left:40px; top:25px;opacity:0.5;}
                to {left:40px; top:25px;visibility:visible;z-index:20;opacity:1;}
            }
            /*触发动画*/
            img
            {
                animation:jump 2s;
                animation-fill-mode : forwards;
            }
            #step_2
            {
                animation:image_show 1s linear 2s;
                animation-fill-mode : forwards;
            }
            #step_3
            {
                animation:image_end 1s linear 3s;
                animation-fill-mode : forwards;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="images/cic.png" />
            <img id="step_2" src="images/sf.png" />
            <img id="step_3" src="images/red.png" />
         </div>
    </body>
</html>
posted @ 2016-10-07 21:02  前端菜鸟教程  阅读(61)  评论(0)  编辑  收藏  举报