css - @keyframes 的 Sass 语法问题

Question

我在尝试实现这个想法时遇到了一些问题，即使它在 Sass 语法中是可能的。我已经看到 SCSS 语法中使用了类似的东西，并且我已经尝试了多种方法来使其工作。现在他们都失败了。

这是代码，你可以从代码中看出背后的思想是什么:

@keyframes AdHop($from, $to)
  0%
    transform: scale($from)
  100%
    transform: scale($to)

所以我的问题是；这甚至有可能做到吗？如果可以，怎么做？

Answer 1

你可以做一个mixin

DEMO

@mixin adHop($from, $to, $name) {
    @keyframes #{$name} {
    0% { transform: scale($from); }
    100% { transform: scale($to); }
  }
}

@include adHop(1, 2, cool);
button:hover { animation: cool 1s; }