@keyframe的Sass语法问题

Question

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

这是代码，你可以从代码中看到它背后的想法：

​

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

​

所以我的问题是:这有可能做到吗?如果可能，如何做到？

Answer 1

您可以进行混合

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; }