使用Sass来定义Keyframes

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS的Animation成为Web Animation中主要实现方式之一。使用CSS 的animation可以在Web中实现一些动画效果。而其中最为关键的还是依赖于@keyframes,让动画可以根据帧定制不同的动画效果。

其实这篇文章的主要目的不是要给大空介绍@keyframes的语法和使用方法。因为,大家对它并不会陌生,而且也知道怎么使用?那么大家在使用keyframes的时候是不是碰到一些烦恼,对于不同的动画效果,都需要去创建一个keyframes,而且对于一个复杂的动画,一个动画中用到多个元素元素时,是不是感觉到管理和维护keyframes比较痛苦,易出错。

如果你有上述这样的烦恼,那么下面的内容值得你花点时间继续往下阅读。

CSS中的keyframes

简单的回忆一下,如果要使用animation创建一个动效,就必须先用keyframes创建一个动效。

@keyframes animation-name {
    ...
}

由于各浏览器厂商对animation支持程度不一样,早期为了兼容各浏览器,需要添加各种前缀:

@-webkit-keyframes animation-name {...}
@-moz-keyframes animation-name {...}
@-o-keyframes animation-name {...}
@keyframes animation-name {...}

虽然后面有了Autoprefixer的出现,让我们变得轻松了些。可以根据不同的配置,在编译代码的时候就会自动根据配置添加需要的前缀。在Autoprefixer的帮助之下,我们可以在代码中直接写:

@keyframes animation-name {...}

但这仅仅是解决了浏览器厂商的前缀的维护问题,但对于整个代码维护并没有帮我们减轻。

SCSS中的keyframes

Autoprefixer还没有出现之前,SCSS其实帮助我们解决一些前缀的事项,言外之意,就是给keyframes定义一个混合宏(mixins):

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

在调用的时候,可以直接这样使用

@include keyframes(move-the-object) {
    0%   { 
     
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-animation-keyframes.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部