scss 用于CSS3动画的Sass Mixin

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 用于CSS3动画的Sass Mixin相关的知识,希望对你有一定的参考价值。

@mixin keyframe ($animation_name) {
    @-webkit-keyframes $animation_name {
        @content;
    }

    @-moz-keyframes $animation_name {
        @content;
    }

    @-o-keyframes $animation_name {
        @content;
    }

    @keyframes $animation_name {
        @content;
    }
}
@include keyframe(fadeout) {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@include keyframe(changecolour) {
    0% {
        color: #000;
    }

    100% {
        color: #FFF;
    }
}
/*
    Example usage: 
    @include animation(10s, 5s, changecolour)
 */
@mixin animation ($delay, $duration, $animation) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: $delay;
    -o-animation-duration: $duration;
    -o-animation-name: $animation;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

以上是关于scss 用于CSS3动画的Sass Mixin的主要内容,如果未能解决你的问题,请参考以下文章

scss 用于CSS3动画的Sass Mixin

用于 css3 关键帧动画的 SASS(不是 SCSS)语法

scss CSS3 calc Sass mixin。资料来源:https://coderwall.com/p/qac-og

scss 使用Sass mixin自动化CSS动画过程,包括供应商前缀

scss 用于项目Mixin零件的SASS样板

scss 方便的sass mixin用于媒体查询