有关动画的总结

1）如果按照从本身位置开始移动，则translate3d使用百分比，如0%~300%；如果按照页面中的位置尺寸移动，则使用具体的px值。比如该元素开始在100px处，使用动画

translate3d(0, 15px, 0)，则该元素先移动到15px处；（注意该元素要设置position:absloute;）

 

@include keyframes(arrow-move, webkit){
    0% {
      opacity: 1;
      @include transform(translate3d(0, 0, 0));
      visibility: visible;
    }
    50% {
      opacity: 1;
      @include transform(translate3d(0, 150%, 0));/*百分比是相对本身尺寸而言的*/
    }
    100% {
      opacity: 1;
      @include transform(translate3d(0, 300%, 0));/*里面的参数是移动到哪个长度位置，而不是移动的长度*/
    }
};

2)

.cloud{
    width:187px;
    height:92px;
    background: url('./i/cloud.png');
    &.fd-move{/*&.fa-move相当于和cloud同等级别的类，一般用于js中addClass作用*/
        /*infinite动画无限运动，或者设置为n，n为运动的次数*/
            @include animation(arrow-move 1s infinite linear);
        }
}

3)使用scss中段样式的方法来化简css

@mixin center{
    background:red;
    border:2px solid green;
}
.line{
        position: absolute;
        width: 100%;
        height: 10px;
        top: 368px;
        @include center;
    }

.ceshi{
        position: absolute;
        width: 100%;
        height: 100px;
        top: 400px;
        @include center;
}

这样相当于line和ceshi中都引入了样式center

4）

 

//文字动画
@include keyframes(txt-move-sr, webkit){/*该div的高度由小到大*/
    0% {
      height: 0;
    }
    100% {
      height: 1.55rem;
    }
};