小动画

介绍一些小动画的制作以及css3动画属性的使用

animation-timing-function 之steps()使用;
timing-function 作用于每两个关键帧之间，而不是整个动画

旋转加载

.wrap{
    width:80px;
    height:80px;
    position:relative;
}
.wrap>div{
    position:absolute;
    top:0;
    left:40px;
    width:5px;
    height:78px;

}
.wrap>div:after,.wrap>div:before{
    content:".";
    display:block;
    height:50%;
    width:5px;
    background:#000;
    border-radius:5px;
}
.wrap .line1{
    -webkit-transform: rotate(0deg);

}
.wrap .line2{
    -webkit-transform: rotate(30deg);

}
.wrap .line3{
    -webkit-transform: rotate(60deg);

}
.wrap .line4{
    -webkit-transform: rotate(90deg);

}
.wrap .line5{
    -webkit-transform: rotate(120deg);

}
.wrap .line6{
    -webkit-transform: rotate(150deg);

}
.wrap .line1:before{

    -webkit-animation:load 1200ms linear 0s infinite forwards;
}
.wrap .line2:before{

    -webkit-animation:load 1200ms linear 0.1s infinite forwards;
}
.wrap .line3:before{

    -webkit-animation:load 1200ms linear 0.2s infinite forwards;
}
.wrap .line4:before{

    -webkit-animation:load 1200ms linear 0.3s infinite forwards;
}
.wrap .line5:before{

    -webkit-animation:load 1200ms linear 0.4s infinite forwards;
}
.wrap .line6:before{

    -webkit-animation:load 1200ms linear 0.5s infinite forwards;
}

.wrap .line1:after{

    -webkit-animation:load 1200ms linear 0.6s infinite forwards;
}
.wrap .line2:after{

    -webkit-animation:load 1200ms linear 0.7s infinite forwards;
}
.wrap .line3:after{

    -webkit-animation:load 1200ms linear 0.8s infinite forwards;
}
.wrap .line4:after{

    -webkit-animation:load 1200ms linear 0.9s infinite forwards;
}
.wrap .line5:after{

    -webkit-animation:load 1200ms linear 1s infinite forwards;
}
.wrap .line6:after{

    -webkit-animation:load 1200ms linear 1.1s infinite forwards;
}
.circle{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 27px;
    left: 30px;
    background: #fff;
    border-radius: 50%;
}
@-webkit-keyframes load{
    0% {
        opacity: 0;

    }



    100% {
        opacity: 1;

    }
}

html

<div class="wrap">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
    <div class="line4"></div>
    <div class="line5"></div>
    <div class="line6"></div>
</div>
<div class="circle"></div>

晃动尾巴的狗

steps(n,start/end) n指每帧之间变化几次 即0%-33%变化n次 33%-67%变化n次 67%-100%变化n次

.dog{
    position:absolute;
    top:200px;
    -webkit-animation: dog .8s steps(1) infinite forwards;
    width: 175px;
    height: 160px;
    background: url("http://sta.ganjistatic1.com/ng/app/client/app/misc/11th_anniversary/images/dog.png") no-repeat;
    background-size: 175px auto;
}
@-webkit-keyframes dog {
    0% {
        background-position: 0 0
    }

    33% {
        background-position: 0 -160px
    }

    67% {
        background-position: 0 -320px
    }

    100% {
        background-position: 0 0
    }
}

html

<!--晃动尾巴的狗-->
<div class="dog"></div>