CSS3 动画

之前跟着慕课网的教程写了个侧边栏，发现他的动画效果是用css3去做的，今天特地去查了下下css3的动画部分，挺有意思的，试着做了个小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background: #666;
        font-family: 'Microsoft Yahei',sans-serif;
        font-size: 10px;
    }
    .sq{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: red;
        position: relative;
        float: left;
        text-align: center;
        font-size: 2rem;
        line-height: 100px;
        opacity: 0;
        -webkit-animation-name: mymove;
                animation-name: mymove;
        -webkit-animation-duration: 3s;
                animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-direction: normal;
                animation-direction: normal;
    }
    #v1 {
        left: 0px;
    }
    #v2 {
        left: 200px;
        -webkit-animation-delay: .1s;
                animation-delay: .1s;
    }
    #v3 {
        left: 400px;
        -webkit-animation-delay: .2s;
                animation-delay: .2s;
    }
    #v4 {
        left: 600px;
        -webkit-animation-delay: .3s;
                animation-delay: .3s;
    }
    #v5 {
        left: 800px;
        -webkit-animation-delay: .4s;
                animation-delay: .4s;
    }
    #v6 {
        left: 1000px;
        -webkit-animation-delay: .5s;
                animation-delay: .5s;
    }
    #v7 {
        left: 1200px;
        -webkit-animation-delay: .6s;
                animation-delay: .6s;
    }

    @-webkit-keyframes mymove {
        0%{
            top: 0px;
            background: white;
            opacity: 0;
        }
        25%{
            background: yellow;
            top: 400px;
            opacity: 1;
        }
        50%{
            background: orange;
            top: 200px;
            opacity: 1;
        }
        75%{
            background: aqua;
            top: 400px;
            opacity: 1;
        }
        100%{
            background: white;
            top: 0px;
            opacity: 0;
        }
    }

    @keyframes mymove {
        0%{
            top: 0px;
            background: white;
            opacity: 0;
        }
        25%{
            background: yellow;
            top: 400px;
            opacity: 1;
        }
        50%{
            background: orange;
            top: 200px;
            opacity: 1;
        }
        75%{
            background: aqua;
            top: 400px;
            opacity: 1;
        }
        100%{
            background: white;
            top: 0px;
            opacity: 0;
        }
    }
    </style>
</head>
<body>
    <div class="sq" id="v1">嘿</div>
    <div class="sq" id="v2">哈</div>
    <div class="sq" id="v3">咦</div>
    <div class="sq" id="v4">啊</div>
    <div class="sq" id="v5">哇</div>
    <div class="sq" id="v6">哦</div>
    <div class="sq" id="v7">哇</div>
</body>
</html>

 

以下是常用是属性

http://www.runoob.com/css3/css3-animations.html

 

@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
posted @ 2016-04-10 16:06  gyx13  阅读(178)  评论(0)  编辑  收藏  举报