@ Sign and Variables in CSS Keyframes Using Less CSS

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.

How to iterate keyframe percentages Less CSS

It seems like the Less compiler does not evaluate functions when directly used as a selector. Solution would be to make use of a temporary variable like in either of the below snippets:

.loop (@n, @index: 0) when (@index <= @n) { /* note the <= as we need 100% frame also */
  @keyframeSel: percentage(@index/@n); /* note the lack of * 100 as Less already does it */
  @{keyframeSel}{
    prop: value;
  }
  .loop(@n, (@index + 1)); // Next iteration.
}
@keyframes anim {
  .loop(20); // Launch the loop.
}

or

.loop (@n, @index: 0) when (@index <= @n) {
  @keyframeSel: @index/@n * 100%;
  @{keyframeSel}{
    prop: value;
  }
  .loop(@n, (@index + 1)); // Next iteration.
}
@keyframes anim {
  .loop(20); // Launch the loop.
}

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

LESS css variable possibilities/restrictions/syntax usage

Try this:

@keyframes KeyFrame_Bes_Web { 
    0% { opacity: 0; animation-timing-function: ease_in; }
    @{Bes_ease_in_finish} { opacity: 1; }                      /* <--- Line 75 is here. */
    @{Bes_ease_out_begin} { opacity: 1; animation-timing-function: ease-out; }
    @{Bes_ease_out_finish} { opacity: 0; }
    100% { opacity: 0 }
}

Instead of @variable you should use @{variable} when using dynamic directives. (is directive the right word? dunno)

---

Related Topics