在 Sass 中使用 Keyframe

一：定义混合宏

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

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

二：引用混合宏

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

@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;

效果如下图：

</div>