CSS 如何在 LESS 中设置关键帧名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15974128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set keyframes name in LESS
提问by Lukas
I try to set up this LESS mixin for CSS animation keyframes:
我尝试为 CSS 动画关键帧设置这个 LESS mixin：
.keyframes(@name, @from, @to) {;
@-webkit-keyframes "@name" {
from {
@from;
}
to {
@to;
}
}
}
but there is some problem with name pharse, is there any option to do this corectly?
但是名称短语存在一些问题，是否有任何选项可以正确地执行此操作？
回答by Martin Turjak
As of LESS >= 1.7 you can use variables for keyframe keywords (names).
从 LESS >= 1.7 开始，您可以将变量用于关键帧关键字（名称）。
Some changes have been made in LESS 1.7 to how directives work, which allows to use variables for the name/keyword of @keyframes(so the example from the question should work now).
LESS 1.7 对指令的工作方式进行了一些更改，允许使用名称/关键字的变量@keyframes（因此问题中的示例现在应该可以使用）。
Unfortunately keyframes names can not be dynamically generated in LESS <= 1.6
不幸的是，关键帧名称不能在 LESS <= 1.6 中动态生成
Hence, the normal way of going about keyframes would use hardcoded names and you would only call for specific "for" and "to" mixins, like this:
因此，处理关键帧的正常方式将使用硬编码名称，并且您只会调用特定的“for”和“to”mixin，如下所示：
.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); }
But you can use a workaround to dynamically generate the names
但是您可以使用一种解决方法来动态生成名称
where you inject the name into the rule name, this however requires an declaration of the next rule that supplies the closing bracket }at the end of the keyframes declaration. The most convenient is if you just build the animation calling that keyframe
在将名称注入规则名称的情况下，这需要声明下一个规则，该规则}在关键帧声明的末尾提供右括号。最方便的是，如果您只是构建调用该关键帧的动画
.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;
}
}
Note that you also need to define .from(){}and .to(){}mixins, and not just use @fromand @tolike you did in your example (because LESS also does not allow for dynamically generated properties) ... this mixins can now construct the desired properties and values ... to use specific property you can use guards or name-specific mixins like these:
请注意，您还需要定义.from(){}和.to(){}混合，而不仅仅是像您在示例中所做的那样使用@from和@to（因为 LESS 也不允许动态生成的属性）......这个混合现在可以构造所需的属性和值......使用特定属性，您可以使用警卫或特定名称的 mixin，如下所示：
// name-specific from and to mixins that are used if first argument equals "colors"
.from (colors, @color) {
color: @color;
}
.to (colors, @color) {
color: @color;
}
Now we can call our mixin in LESS:
现在我们可以在LESS 中调用我们的 mixin ：
// test
.animation-keyframes (colors, red, blue, my-colanim);
and get CSS:
并获取CSS：
@keyframes colors {
from {
color: #ff0000;
}
to {
color: #0000ff;
}
}
.my-colanim {
animation-name: colors;
}
this will work also in LESS 1.4, but note that we used javascript interpolation for line breaks, which requires a javascript implementation of LESS.
这也适用于 LESS 1.4，但请注意，我们对换行符使用了 javascript 插值，这需要 LESS 的 javascript 实现。
Edit:to your additional question about prefixes
编辑：关于前缀的其他问题
Mixin with vendor prefixes
与供应商前缀混合
Here I made two mixins ... one without vendor prefixes and one with them both calling a general .keyframesmixin:
在这里，我做了两个 mixin ……一个没有供应商前缀，一个都称为通用.keyframesmixin：
.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);
The .animation-keyframeswill now produce keyframes for all vendor prefixes and an animation selector with vendor prefixed properties. And as expected the .animation-keyframes-novendorgives the same output as the above simple solution (without vendor prefixes).
在.animation-keyframes现在将产生关键帧的所有供应商的前缀，并与供应商的前缀属性的动画选择。正如预期的那样，.animation-keyframes-novendor它给出了与上述简单解决方案相同的输出（没有供应商前缀）。
Some notes:
一些注意事项：
For your animation to actually work you need to set other animation parameters like timing-function, duration, direction, iteration-count (requires at least a duration time in addition to the name that we already set).
For example:
为了让您的动画实际工作，您需要设置其他动画参数，例如计时函数、持续时间、方向、迭代次数（除了我们已经设置的名称之外，至少还需要一个持续时间）。
例如：
animation: @name ease-in-out 2s infinite alternate;
If you wrap above mixins in namespaces make sure you change the mixin references inside other mixins to their whole path (including the namespaces).
For example:
如果您将上面的 mixin 包装在命名空间中，请确保将其他 mixin 中的 mixin 引用更改为它们的整个路径（包括命名空间）。
例如：
#namespace > .keyframes () // see .less source in the demo for details
回答by Lukas
I am currently working on a mixin library
我目前正在开发一个 mixin 库
The source can be found here https://github.com/pixelass/more-or-less
来源可以在这里找到https://github.com/pixelass/more-or-less
My keyframe mixin looks like this:
我的关键帧混合看起来像这样：
WORKS FOR LESS 1.7.x
适用于低于 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);
}
}
回答by JVitela
How about this:
这个怎么样：
@-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;}
}
You need to do it for each animation. Taken from: http://radiatingstar.com/css-keyframes-animations-with-less
您需要为每个动画执行此操作。取自：http: //radiatingstar.com/css-keyframes-animations-with-less
回答by kuus
Also thanks to the great answer by Martin Turjak, (thank you for that)I just put on github a less mixin which generate keyframes and animation's css code without hacks and in a flexible way, you can find it here github.com/kuus/animate-me.less.
还要感谢Martin Turjak的精彩回答，（谢谢你）我只是在 github 上放了一个较少的 mixin，它可以在没有黑客的情况下以灵活的方式生成关键帧和动画的 css 代码，你可以在这里找到它github.com/kuus/ animate-me.less。
With this mixin you can write this code to obtain valid and cross browser css (see the github repo for a complete explanation):
使用此 mixin，您可以编写此代码以获取有效的跨浏览器 css（请参阅 github repo 以获取完整说明）：
.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'
);
回答by tcgumus
I think you should do this
我认为你应该这样做
@-webkit-keyframes @name
{
code...
}
change "@name"to @name
更改"@name"为@name
and you should delete ;after
你应该;在之后删除
.keyframes(@name, @from, @to) {
回答by thybzi
Before-mentioned https://github.com/kuus/animate-me.lessdoes things!
之前提到的https://github.com/kuus/animate-me.less做事！
You can also check out this one written by me (seems to be neater): https://github.com/thybzi/keyframes
你也可以看看我写的这个（好像更整洁）：https: //github.com/thybzi/keyframes
