Performing math with LESS variables for animated keyframes

I am trying to use LESS variables to be able to manipulate synchronization on animations with a circular keyframe. I would like my animations to work outside of calculations based on several variables, but LESS analyzes the keyframe values ​​without doing the math.

Does anyone know if this is possible?

@sL: 15px;                      /* slide length */
@aL: 4%;                        /* animation length */
@pL: (100% - (@aL * 10)) / 2;   /* pause length (100% - length of all animations / 2) */

@-webkit-keyframes slideA {
    0%                      { left: 0; }
    @{aL}                   { left: @sL; }
    (100%-@{pL})-@{aL} * 2  { left: @sL; }
    (100%-@{pL})            { left: 0; }
    100%                    { left: 0; }
}

The LESS output is as follows:

/* slide length */
/* animation length */
/* pause length (100% - length of all animations / 2) */
@-webkit-keyframes slideB {
  0% {
    left: 0;
  }
  4% {
    left: 0;
  }
  (4% * 2) {
    left: 30px;
  }
}
+4
source share
1 answer

, , -, 16/9 CSS . (, font). Less (1.7) , . , , , , . , , , ( , ).

. ( http://lesstester.com/):

@sL: 15px;                      /* slide length */
@aL: 4%;                        /* animation length */
@pL: (100% - (@aL * 10)) / 2;   /* pause length (100% - length of all animations / 2) */
@v1: (100% - @pL) - @aL * 2;
@v2: (100% - @pL);


@-webkit-keyframes slideA {
    0%     { left: 0; }
    @{aL}  { left: @sL; }
    @{v1}  { left: @sL; }
    @{v2}  { left: 0; }
    100%   { left: 0; }
}
+3

Source: https://habr.com/ru/post/1535960/


All Articles