用较少的链接关键帧属性

时间：2012-10-31 15:07:04

标签： css3 animation less css-animations

所以我正在尝试为css3关键帧创建一个LESS mixin。链接id和类的方法通常如下：

#idOne,
#idTwo,
.classOne,
.classTwo {
    ...
}

这不是什么新鲜事，也没什么大不了的。我现在正在尝试创建以下mixin 

#rotate(@deg){
    -webkit-transform: rotate(@deg);
    -moz-transform: rotate(@deg);
    -o-transform: rotate(@deg);
}

以下内容：

@-webkit-keyframes wiggle {
  10% { #rotate(14deg); } 
  20% { #rotate(-12deg); }  
  30% { #rotate(10deg); } 
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); } 
  70% { #rotate(3deg); }  
  80% { #rotate(-2deg); } 
  90% { #rotate(1deg); }  
  100% { #rotate(0deg); } 
}

@-moz-keyframes wiggle {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }
}

@-o-keyframes wiggle {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }  
}

@keyframes wiggle {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }  
}

现在的问题是：为什么我不能这样做：

@-webkit-keyframe,
@-moz-keyframes,
@-o-keyframes,
@keyframes {
  10% { #rotate(14deg); } 
  20% { #rotate(-12deg); }  
  30% { #rotate(10deg); } 
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); } 
  70% { #rotate(3deg); }  
  80% { #rotate(-2deg); } 
  90% { #rotate(1deg); }  
  100% { #rotate(0deg); } 
}

非常感谢任何帮助！谢谢！

1 个答案:

答案 0 :(得分：8)

更新了LESS 1.7+答案

现在可以将其简化为以下内容（因为规则集现在可以设置为变量和用于@keyframes的变量名称[尽管我还不知道扩展名是什么]）：

@myWiggle:   {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }
};

#rotate(@deg){
    @{vendor}transform: rotate(@deg);
}

#doKeyFrames(@name; @frames) {
    @-webkit-keyframes @name {
      @vendor: -webkit-;
      @frames(); 
    }
    @-moz-keyframes @name {
      @vendor: -moz-;
      @frames(); 
    }
    @-o-keyframes @name {
      @vendor: -o-;
      @frames(); 
    } 
    @keyframes @name {
      @vendor: ~'';
      @frames(); 
    }
}

#doKeyFrames(wiggle; @myWiggle);

原始（少前1.7）答案

你认为不能按你想要的方式做到这一点是双重的。 1）LESS有一些问题正确处理@规则，因为它使用@符号表示变量; 2）我注意到keyframes和动画的专有CSS有时在与其他专有CSS混合时效果不佳。修改a complicated previous answer I gave with keyframes，我能够生成一些代码，使其在LESS方面保持一定的紧凑性，但仍然完全扩展了CSS输出的功能。

它使用一些技巧（我在上一个答案中链接到它）来组合字符串和变量以获得输出。它的一些部分对我的实际工作方式来说仍然有些神秘，但它确实可以正确编译。

<强> LESS 

.rotate(@percent, @vendor, @deg) {
   @rotation: ~"rotate(@{deg}deg)";
   //define vendor patterns
   .makeVendor("-moz-") {
     (@percent) {-moz-transform: @rotation;}
    }
   .makeVendor("-webkit-") {
     (@percent) {-webkit-transform: @rotation;}
    }
   .makeVendor("-o-") {
     (@percent) {-o-transform: @rotation;}
    }
   .makeVendor("-ms-") {
     (@percent) {-ms-transform: @rotation;}
    }
   .makeVendor("") {
     (@percent) {transform: @rotation;}
    }
    //call vendor specific string
    .makeVendor(@vendor);

}

// define keyframe mixin

.keyframes(@selector, @name) {
    @newline: `"\n"`; // Newline
    .setVendor(@pre, @post, @vendor) {
        (~"@{pre}@@{vendor}keyframes @{name} {@{newline}"){
         .rotate(10%, @vendor, 14);  
}
         .rotate(20%, @vendor, -12);
         .rotate(30%, @vendor, 10);
         .rotate(40%, @vendor, -8);
         .rotate(50%, @vendor, 6);
         .rotate(60%, @vendor, -4);
         .rotate(70%, @vendor, 3);
         .rotate(80%, @vendor, -2);
         .rotate(90%, @vendor, 1);
         .rotate(100%, @vendor, 0);  

       .Local(){}
       .Local() when (@post=1) {
           (~"}@{newline}@{selector}") {
              -moz-animation: @name;
              -webkit-animation: @name;
              -o-animation: @name;
              -ms-animation: @name;
              animation: @name;
           } 
       }    
       .Local;
    } 
    .setVendor(""            , 0,    "-moz-");
    .setVendor(~"}@{newline}", 0, "-webkit-");
    .setVendor(~"}@{newline}", 0,      "-o-");
    .setVendor(~"}@{newline}", 0,     "-ms-");
    .setVendor(~"}@{newline}", 1,         "");
}

CSS输出 

@-moz-keyframes wiggle {
 10% {
  -moz-transform: rotate(14deg);
}
20% {
  -moz-transform: rotate(-12deg);
}
30% {
  -moz-transform: rotate(10deg);
}
40% {
  -moz-transform: rotate(-8deg);
}
50% {
  -moz-transform: rotate(6deg);
}
60% {
  -moz-transform: rotate(-4deg);
}
70% {
  -moz-transform: rotate(3deg);
}
80% {
  -moz-transform: rotate(-2deg);
}
90% {
  -moz-transform: rotate(1deg);
}
100% {
  -moz-transform: rotate(0deg);
}
}
@-webkit-keyframes wiggle {
 10% {
  -webkit-transform: rotate(14deg);
}
20% {
  -webkit-transform: rotate(-12deg);
}
30% {
  -webkit-transform: rotate(10deg);
}
40% {
  -webkit-transform: rotate(-8deg);
}
50% {
  -webkit-transform: rotate(6deg);
}
60% {
  -webkit-transform: rotate(-4deg);
}
70% {
  -webkit-transform: rotate(3deg);
}
80% {
  -webkit-transform: rotate(-2deg);
}
90% {
  -webkit-transform: rotate(1deg);
}
100% {
  -webkit-transform: rotate(0deg);
}
}
@-o-keyframes wiggle {
 10% {
  -o-transform: rotate(14deg);
}
20% {
  -o-transform: rotate(-12deg);
}
30% {
  -o-transform: rotate(10deg);
}
40% {
  -o-transform: rotate(-8deg);
}
50% {
  -o-transform: rotate(6deg);
}
60% {
  -o-transform: rotate(-4deg);
}
70% {
  -o-transform: rotate(3deg);
}
80% {
  -o-transform: rotate(-2deg);
}
90% {
  -o-transform: rotate(1deg);
}
100% {
  -o-transform: rotate(0deg);
}
}
@-ms-keyframes wiggle {
 10% {
  -ms-transform: rotate(14deg);
}
20% {
  -ms-transform: rotate(-12deg);
}
30% {
  -ms-transform: rotate(10deg);
}
40% {
  -ms-transform: rotate(-8deg);
}
50% {
  -ms-transform: rotate(6deg);
}
60% {
  -ms-transform: rotate(-4deg);
}
70% {
  -ms-transform: rotate(3deg);
}
80% {
  -ms-transform: rotate(-2deg);
}
90% {
  -ms-transform: rotate(1deg);
}
100% {
  -ms-transform: rotate(0deg);
}
}
@keyframes wiggle {
 10% {
  transform: rotate(14deg);
}
20% {
  transform: rotate(-12deg);
}
30% {
  transform: rotate(10deg);
}
40% {
  transform: rotate(-8deg);
}
50% {
  transform: rotate(6deg);
}
60% {
  transform: rotate(-4deg);
}
70% {
  transform: rotate(3deg);
}
80% {
  transform: rotate(-2deg);
}
90% {
  transform: rotate(1deg);
}
100% {
  transform: rotate(0deg);
}
}
.myWiggleClass {
  -moz-animation: wiggle;
  -webkit-animation: wiggle;
  -o-animation: wiggle;
  -ms-animation: wiggle;
  animation: wiggle;
}
相关问题
最新问题