css3 贝塞尔曲线动画

 

 

 

 上面图标初始加载的时候，呈：奇数从左上淡现，偶数车左下呈现。

　　　　　　　　　　　　　<div>
                            <ul class="trantion" v-for="(item,index) in dataLI" @click="handelIdex(index)">
                                <li :class="'trantiones'+ (intx == index ? 'actives' : '')">{{item.name}}</li>
                            </ul>
                        </div>

//改变激活对应的intx，我这里只是一个简单的deom,其主要应用css3动画的贝塞尔曲线

    .trantion li{
        width: 20px;
        height: 20px;
        float: left;
        margin-left: 10px;
        border:1px solid black;
        opacity: 0;
        transform: scale(0);//主要动画
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transition: all .8s cubic-bezier(.4,0,.2,1);//贝塞尔曲线
        -webkit-transition: all .8s cubic-bezier(.4,0,.2,1);
        -moz-transition: all .8s cubic-bezier(.4,0,.2,1);
        -o-transition: all .8s cubic-bezier(.4,0,.2,1);
        -ms-transition: all .8s cubic-bezier(.4,0,.2,1);

    }
.trantion .trantiones{
    opacity: 1;
    transform: scale(1);
    }
.trantion li .actives{
    transform: scale(1);
}
.trantion li:nth-child(2n){
    transform-origin: left top;
}
.trantion li:nth-child(2n){
    transform-origin: left bottom;
}