51dev.com IT技术开发者社区

51dev.com 技术开发者社区

在 Sass 中使用 Keyframe

IT猿阅读(34)2019-10-30 收藏0次评论

一:定义混合宏

  SASS中使用Keyframe首先定义一个混合宏,由KeyframesanimationNamecontent组成,代码如下:

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

效果如下图:

以上就是在 Sass 中使用 Keyframe的全部内容。

相关内容