Pass argument to keyframes animation

Question

So I saw this question (Add argument into @keyframes property Less) however it doesn't completely solve my problem.

.progress-anim(@percentage: 0%) {
    @-webkit-keyframes progress { 
        to { width: @percentage }
    }

    @-moz-keyframes progress { 
        to { width: @percentage }
    }

    @-ms-keyframes progress { 
        to { width: @percentage }
    }

    @keyframes progress { 
        to { width: @percentage }
    }
}

Above is what I'm trying to do. This, I understand. What I don't understand, is how to run it from a animation property.

.progress {
    -webkit-animation: ? 2s 1 forwards;
    -moz-animation: ? 2s 1 forwards;
    -ms-animation: ? 2s 1 forwards;
    animation: ? 2s 1 forwards;
}

What do I put in place for the ?? I don't understand this.

Do I put the animation calls within .progress-anim?

score 3 · Accepted Answer · answered Jan 15 '17 at 10:59

Please don't use Less mixins for vendor prefixing. It is better to leave that part to the libraries like auto-prefixer, prefix-free etc.

Coming to your questions,

What do I put in place for the ?? I don't understand this.

You should substitute the name of the animation in the place of that ?. The name of the animation is the one that is provided after the @keyframe directive. Here it is nothing but progress and so the CSS should look like this:

.progress {
  animation: progress 2s 1 forwards;
}

If you already knew this and are trying to understand how Less can be used to avoid writing the name of the animation multiple times then you can use variables and parametric mixins like shown below:

.progress-anim(@name; @percentage: 0%) { /* name also as an extra param */
  @keyframes @name { /* set the name dynamically */
    to { width: @percentage }
  }
}

.progress {
  @name: progress; /* animation name */
  .progress-anim(@name, 50%); /* pass it to mixin */
  animation: @name 2s 1 forwards; /* use variable in animation prop */
}

Below is a sample demo using this code (some properties and settings are added for completeness):

.container {
  position: relative;
  height: 100px;
  width: 500px;
  border: 1px solid;
}
.progress {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0%;
  background-color: tomato;
  animation: progress 2s 1 forwards;
}
@keyframes progress {
  to {
    width: 50%;
  }
}

<div class='container'>
  <div class='progress'></div>
</div>

Do I put the animation calls within .progress-anim?

No, specify the animation property within the selector that would refer to the progress element.

Pass argument to keyframes animation

1 Answers1