使用CSS3-animation简单制作逐帧动画

今天做了个demo。使用CSS3-animation来制作逐帧动画，非常简单！

动画的关键是使用了animation的steps属性。至于怎么用，什么原理，读者可以自己去查阅相关资料~~~

demo1如下：

 

 

 

demo1代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3逐帧动画</title>
    <style>
    .anim-png{
        width:230px;
        height: 202px;
        background:url(http://mintdesigncompany.com/wp-content/themes/mintymint/imgs/anims/newLOGO-lg.png)no-repeat 0 0;
        -webkit-animation:leaf 1500ms steps(44) infinite 0s;
    }
    @-webkit-keyframes leaf{
        0%{
            background-position:-10120px 0;
        }
        100%{
            background-position: 0 0;
        }
    }
    </style>
</head>
<body>
<div class="anim-png"></div>
</body>
</html>

 

demo2：

 

 

 

demo2代码：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3逐帧动画</title>
    <style>
    .anim-png2{
        width: 478px;
          height: 426px;
        background:url(http://mintdesigncompany.com/wp-content/themes/mintymint/imgs/mintPlant-sprite.png)no-repeat 0 0;
        -webkit-animation:leaf2 2000ms steps(54) infinite 0s;
    }
    @-webkit-keyframes leaf2{
        0%{
            background-position:-25812px 0;
        }
        100%{
            background-position: 0 0;
        }
    }
    </style>
</head>
<body>
<div class="anim-png2"></div>
</body>
</html>

 

posted @ 2015-04-02 14:42  Joy Ho  阅读(951)  评论(0)  编辑  收藏  举报