在 Sass 中使用 Keyframe

一：定义混合宏

　　SASS中使用Keyframe首先定义一个混合宏，由Keyframes、animationName和content组成，代码如下：

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

二：引用混合宏

　　使用@include 指令引用定义好的混合宏，创建动画并定义动画名称：

@include keyframes(move) {
    0%   { 
        margin-left: 100px;
    }
    100% { 
        margin-left: 400px;
    }
}

三：使用动画

animation: move 7s linear;
-moz-animation: move 7s linear;
-webkit-animation: move 7s linear;
-o-animation: move 7s linear;

效果如下图：