markdown 一个简单的Sass函数,用于基于帧的CSS动画

Posted

tags:

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

# A simple Sass function for frame-based CSS animation

If you have experience with animation in other media, CSS animation’s percentage-based keyframe syntax can feel pretty alien, especially if you want to be very precise about timing. This Sass function lets you forget about percentages and express keyframes in terms of actual frames:

```sass
@function f($frame) {
  @return percentage( $frame / $totalframes )
}
```

When you create a new `@keyframes` at-rule, put the following three variables above it (customize the values for `$seconds` and `$framerate` but leave `$totalframes` as-is):

```sass
$seconds: 3;
$framerate: 30;
$totalframes: $seconds * $framerate;
```

Now just invoke the `f` function in place of percentages:

```sass
@keyframes rgb {
  #{f(0)} { color: red; }              // 0 seconds
  #{f(30)} { color: green; }           // 1 second
  #{f(60)} { color: blue; }            // 2 seconds
  #{f($totalframes)} { color: red; }   // 3 seconds
}
```

When applying the animation to an element, be sure to set the `animation-duration` like so:

```sass
.television {
  animation-name: rgb;
  animation-duration: 1s * $seconds;
}
```

Any time a new `@keyframes` at-rule changes up the frame rate or duration from the one before, just add a new set of variables:

```sass
$seconds: 4;
$framerate: 24;
$totalframes: $seconds * $framerate;

@keyframes cmyk {
  #{f(0)} { color: cyan; }             // 0 seconds
  #{f(24)} { color: magenta; }         // 1 second
  #{f(48)} { color: yellow; }          // 2 seconds
  #{f(72)} { color: black; }           // 3 seconds
  #{f($totalframes)} { color: cyan; }  // 4 seconds
}

.film {
  animation-name: cmyk;
  animation-duration: 1s * $seconds;
}
```

以上是关于markdown 一个简单的Sass函数,用于基于帧的CSS动画的主要内容,如果未能解决你的问题,请参考以下文章

Sass lightness() 函数不适用于 TailwindCSS 主题变量

Sass 数字函数

markdown [SASS功能] #sass #css

markdown [SASS cheatsheet] #css #sass

Css calc()函数不适用于sass文件[重复]

markdown 设计师的Sass技巧