如何在更短的设置关键帧名字(How to set keyframes name in LESS)

我尝试建立对CSS动画关键帧这个LESS混入：

.keyframes(@name, @from, @to) {;
  @-webkit-keyframes "@name" {
    from {
      @from;  
    }
    to {
      @to;
    }
  }
}

但有一些问题与名称pharse，没有任何选项corectly做到这一点？

Answer 1:

由于少> = 1.7，你可以使用关键帧的关键字（名称）的变量。

一些变化已经在不到1.7已作出指令的工作原理，它允许使用变量的名称/关键字@keyframes （所以从这个问题的例子应该现在的工作）。 DEMO

不幸的是关键帧名不能在LESS <= 1.6动态地生成

因此，要去大约关键帧将使用硬编码的名字，你会只调用特定的“为”与“为”混入，这样的正常方式：

.colors-mixin-frame(@from,@to){
from {color: @from;}
to {color: @to;}
}

.width-mixin-frame(@from,@to){
from {width: @from;}
to {width: @to;}
}

// keyframes with hardcoded names calling for specific mixin frames
@keyframes red-blue { .colors-mixin-frame(red, blue); }
@keyframes change-width { .width-mixin-frame(254px, 512px); }

但是你可以用一种变通方法来动态生成名称

在那里你注入名字变成了规则的名字，这不过需要提供的右括号下一条规则的声明}在关键帧声明的结尾。最方便的是，如果你只是建立动画调用一个关键帧

.animation-keyframes(@name, @from, @to, @anim-selector) {
  @keyf: ~"@keyframes @{name} { `'\n'`from ";
  @anim: ~"} `'\n'`.@{anim-selector}";
  @{keyf} {
      .from(@name,@from);
        }
      to {
        .to(@name,@to);
      }
  @{anim} {
    animation-name:@name;
  }
}

请注意，您还需要定义.from(){}和.to(){}混入，而不是仅仅使用@from和@to就像你在你的例子一样（因为较少也不允许动态生成的属性）。 ..这混入现在可以构建所需的属性和值...使用特定的属性，你可以使用警卫或喜欢这些特定名称的混入：

// name-specific from and to mixins that are used if first argument equals "colors"
.from (colors, @color) {
  color: @color;
}
.to (colors, @color) {
  color: @color;
}

现在，我们可以拨打我们的mixin在LESS：

// test
.animation-keyframes (colors, red, blue, my-colanim);

并获得CSS：

@keyframes colors { 
from {
  color: #ff0000;
}
to {
  color: #0000ff;
}
} 
.my-colanim {
  animation-name: colors;
}

这也将工作在不到1.4，但要注意，我们使用的JavaScript插换行，这需要一个JavaScript实现更少。

编辑：您关于前缀的其他问题

与供应商前缀的mixin

在这里，我做了两个混入......一个没有供应商前缀和一个与他们都呼吁一般.keyframes混入：

.keyframes (@name, @from, @to, @vendor:"", @bind:"") {
  @keyf: ~"@{bind}@@{vendor}keyframes @{name} { `'\n'`from ";
  @{keyf} {
      .from(@name,@from);
        }
      to {
        .to(@name,@to);
      }
}

.animation-keyframes-novendor (@name, @from, @to, @anim-selector) {
  .keyframes (@name, @from, @to);
  @anim: ~"} `'\n'`.@{anim-selector}";
  @{anim} {
    animation-name:@name;
  }
}

.animation-keyframes (@name, @from, @to, @anim-selector) {
  @bind: "} `'\n'`";
  .keyframes (@name, @from, @to, "-moz-");
  .keyframes (@name, @from, @to, "-webkit-", @bind);
  .keyframes (@name, @from, @to, "-o-", @bind);
  .keyframes (@name, @from, @to, "-ms-", @bind);
  .keyframes (@name, @from, @to, "", @bind);
  @anim: ~"} `'\n'`.@{anim-selector}";
  @{anim} {
    -moz-animation: @name;
    -webkit-animation: @name;
    -o-animation: @name;
    -ms-animation: @name;
    animation: @name;
  }
}

.from (colors, @color) {
  color: @color;
}
.to (colors, @color) {
  color: @color;
}

/* keyframes with all vendor prefixes */
.animation-keyframes (colors, red, blue, my-colanim);

/* keyframes with no vendor prefix */
.animation-keyframes-novendor (colors, red, blue, my-colanim);

该.animation-keyframes现在将产生关键帧的所有供应商的前缀，并与供应商的前缀属性的动画选择。和如预期的那样.animation-keyframes-novendor给出的输出作为上述简单的解决方案（没有供应商前缀）相同。

一些注意事项：

为了您的动画实际工作需要设置其他动画参数，如定时功能，时间，方向，迭代数（至少需要除了我们已经设置名称的持续时间）。
例如：

   animation: @name ease-in-out 2s infinite alternate;

如果上面的包装命名空间中混入确保你改变他们的整个路径（包括命名空间）等混入内部混入引用。
例如：

   #namespace > .keyframes () // see .less source in the demo for details

DEMO

Answer 2:

我目前工作的一个mixin库

源可以在这里找到https://github.com/pixelass/more-or-less

我的关键帧的mixin看起来是这样的：

工作时间不1.7.x

MIXIN

.keyframes(@name) { 
    @-webkit-keyframes @name {
        .-frames(-webkit-);
    }
    @-moz-keyframes @name {
        .-frames(-moz-);
    }
    @keyframes @name {
        .-frames();
    }
}

INPUT

& {
    .keyframes(testanimation);.-frames(@-...){
        0% {
            left: 0;
            @{-}transform: translate(10px, 20px);
        }

        100% {
            left: 100%;
            @{-}transform: translate(100px, 200px);
        }
    }
}

OUTPUT

@-webkit-keyframes testanimation {
  0% {
    left: 0;
    -webkit-transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    -webkit-transform: translate(100px, 200px);
  }
}
@-moz-keyframes testanimation {
  0% {
    left: 0;
    -moz-transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    -moz-transform: translate(100px, 200px);
  }
}
@keyframes testanimation {
  0% {
    left: 0;
    transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    transform: translate(100px, 200px);
  }
}

Answer 3:

这个怎么样：

@-webkit-keyframes some-animation {.mixi-frames;}
@-moz-keyframes some-animation {.mixi-frames;}
@-ms-keyframes some-animation {.mixi-frames;}
@-o-keyframes some-animation {.mixi-frames;}
@keyframes some-animation {.mixi-frames;}

.mixi-frames () {
    from {width: 254px;}
    to {width: 512px;}
}

你需要做的是为每个动画。：来自http://radiatingstar.com/css-keyframes-animations-with-less

Answer 4:

也多亏了伟大的答案马丁Turjak ，（感谢你），我只是把在GitHub上不太混入其中产生的关键帧，没有黑客，并以灵活的方式动画的CSS代码，你可以在这里找到它github.com/kuus/动画-me.less 。

有了这个混入您可以编写代码，以获得有效的，跨浏览器的CSS（见一个完整的解释了GitHub库）：

.animate-me(ComplexAnimation; 0.4s ease; '.complex-animation';
    '50%, 100%'; '%stransform: translateZ(-250px) rotateY(30deg)';
    70%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: .5; background:   green';
    30%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: .2; background: yellow';
    80%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: 1; background: red'
);