How to Set Keyframes Name in Less

How to create a random keyframes name by less fix the space or quote symbol

The last solution,some code like this:

.goTop(@time:1s,@position:-100%,@ease:ease-out,@fillmode:forwards){

 .goTopKeyframe(~`'goTop_'+Math.round(Math.random() * 1.0e8)`);

}

.goTopKeyframe(@name){

 @keyframes @name{

  from{transform:translateY(0);}

  to{transform:translateY(@position);}

 }

 animation-name:@name;

 animation-duration:@time;

 animation-timing-function:@ease;

 animation-fill-mode:@fillmode;

}

Add argument into @keyframes property Less

Passing arguments to @keyframes cannot be done directly in Less. We can however wrap the whole @keyframes rule within a parent mixin, pass the argument to that mixin and use it within the frames.

.loader(@transform){ /* wrapper mixin which accepts input parameter */
   @keyframes loader {
     0% { transform: @transform rotate(0deg); }
     100% { transform: @transform rotate(360deg); }
   }
}

.loader(translate(0, -50%)); /* mixin call */

(Curt had provided an answer initially but had deleted it for reasons unknown to me.)

---

Just in case you are interested, generic keyframe mixins can also be written in Less like given below.

Sample 1:

.generickeyframe(@name; @from; @to){ /* takes name, from frame rules, to frame rules */
  @keyframes @name{
    0% { @from();}
    100% { @to();}
  }
}
.generickeyframe(loader; {transform: translate(0,-50%) rotate(0deg)}; 
            {transform: translate(0,-50%) rotate(360deg)});

Sample 2:

.keyframefromto(@name; @from; @to){
  @keyframes @name{
    0% { transform: @from;}
    100% { transform: @to;}
  }
}
.keyframefromto(loader; translate(0,-50%) rotate(0deg); translate(0,-50%) rotate(360deg));

---

If multiple frames are required to be present within the @keyframes rule, we could make use of array-list and loops like in the below snippet. This mixin takes the name of the animation, the list of frames (their percentage numbers) and the properties for each frame (in the form of rulesets) as parameters.

.generickeyframe(@name; @framelist; @frameprops){
  @keyframes @name{
    .loop-framelist(@index) when (@index <= length(@framelist)){
      @framepos: extract(@framelist, @index) * 1%;
      @{framepos}{
        @props: extract(@frameprops, @index);
        @props();
      }
      .loop-framelist(@index + 1);
    }
    .loop-framelist(1);
  }
}
.generickeyframe(loader; 
                0,25,50,75,100; 
                {transform: translateX(10px);},
                {transform: translateX(20px);},
                {transform: translateX(50px);},
                {transform: translateX(20px);},
                {transform: translateX(10px);}
                );

Compiled CSS:

@keyframes loader {
  0% {transform: translateX(10px);}
  25% {transform: translateX(20px);}
  50% {transform: translateX(50px);}
  75% {transform: translateX(20px);}
  100% {transform: translateX(10px);}
}

Set LESS keyframe name using Web Essentials 2012

Found a working solution, but it feels a bit like a "hack". I've downloaded the latest LESS-compiler and overwritten the one used by Web Essentials, which is found at C:\Users[USER]\AppData\Local\Microsoft\VisualStudio\11.0\Extensions\[SOME SEEMINGLY RANDOM CHARACTERS]\Resources\Scripts with filename less-1.6.3.min.js.

For the new compiler to work I did have to use the same filename as the existing compiler. After that it was just a matter of restarting Visual Studio and resaving my LESS-file. The generated CSS-file now contains the code I'd expected and wanted.

Until Web Essentials is updated with the new LESS compiler, this solution will suffice for me.

Dynamic prefixed keyframe generation with LESS CSS

In short, no, an interpolation of the at-rule directive identifiers is not supported (and is not planned to be).

Well, you can get what you want with something like:

.vendorize-keyframes(dostuff, {
    0% {color: tomato}
    to {color: potato}
});

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

But in general the recommendation is to consider to use a tool like autoprefixer and stop polluting your Less and/or CSS code with these hardcoded vendor prefixes.

LESSCSS and @keyframes

These are whitelisted, -ms is missing. keyframes should work: https://github.com/cloudhead/less.js/blob/master/lib/less/parser.js#L988

There is an open request for a fix: https://github.com/cloudhead/less.js/pull/498

The common workaround is to put keyframes in a separate .css file that you import - files with a .css extension are not parsed by LESS.

Can we restrict CSS keyframe animations to a scope

I used to use something like SCSS to generate automatically created names for my keyframes. They might not be as descriptive, but they ensure uniqueness. Something like:

$animation-id-count: 0 !global;

@function animation-id {

  $animation-id-count: $animation-id-count + 1;
  @return animation-id-#{$animation-id-count};

}

After this, just use the function in your code like this:

.class {

  $id: animation-id();

  @keyframes #{$id}{
    ...keyframes
  }

  animation: $id 1s infinite;

}

That way if you insert it anywhere else in your SCSS or move it, it will still match the right animation, and it stops namespaces from overlapping in any way.

---

Related Topics