用于 css3关键帧动画的 SASS (而非 SCSS)语法

有没有办法在 SASS 中编写关键帧？

我发现的每个例子实际上都是 SCSS，即使它说它是 SASS。先说清楚，我是说没有花括号的那个。

72966 次浏览
小开
最佳答案

下面是如何用 Sass 语法实现 css 关键帧:

@keyframes name-of-animation
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)

下面是添加供应商前缀的 Sass Mixin:

=keyframes($name)
@-webkit-keyframes #{$name}
@content
@-moz-keyframes #{$name}
@content
@-ms-keyframes #{$name}
@content
@keyframes #{$name}
@content

以下是如何在 Sass 语法中使用 mix in:

+keyframes(name-of-animation)
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)
小开

只要创建关键帧:

@keyframes name
0%
transform: scale(1)
50%
transform: scale(1.5)
100%
transform: scale(1)

那就用

.example-btn
animation: name 2s linear infinite

如果你在其他.sass 文件中存储关键帧，你只需要导入这个文件(关键帧) ，一切都会很好。


提交答案