Mixin for animation-timing-function and transition-timing-function

[meduzen]

It could be less cumbersome to write the CSS transition-timing-function and animation-timing-function rules. A mixin could be handy, but it has to be straightforward and intuitive.

So, in order to generate one of these lines of CSS:

.my-class {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* = in-out-quad */
  transition-timing-function: var(--in-out-quad);
}

This SCSS could be written:

.my-class {
  // using current easings.scss version
  transition-timing-function: $in-out-quad;
  transition-timing-function: bezier(.455, .03, .515, .955);

  // straightforward,but is it for animation-timing-function or transtition-timing-function?
  @include timing('in-out-quad');
  @include timing(.455, .03, .515, .955);

  // a bit longer, but still shorter and more explicit than previous proposal
  @include transition-timing('in-out-quad');
  @include transition-timing(.455, .03, .515, .955);

  // alternative, but less explicit about what it generates
  @include transition-easing('in-out-quad');
  @include transition-easing(.455, .03, .515, .955);
}

It looks that for the easings already included in easings.scss, there’s no benefit. But for custom easing curves, it’s a 8 characters saving.

Waiting for feedbacks (and mine after using the library in real projects during a few months).