.animation() mixin

[zlatanvasovic]

It would be nice to have .animation(...) mixin for animations, like for progress bars.

[ElijahFowler]

You can add this yourself if you want:

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
    -webkit-animation: @name @duration @delay @ease;
       -moz-animation: @name @duration @delay @ease;
        -ms-animation: @name @duration @delay @ease;
}

Or better yet use Autoprefixer with your current preprossor, or download Prepros and use the Autoprefixer option when you compile it.

[zlatanvasovic]

I said this because of there are a lot transition and transform mixins, can
an animation mixin be there?

For example, look at progress-bars.less. Progress bars use animations.

2013/10/25 Elijah Fowler notifications@github.com

You can add this yourself if you want:

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
-webkit-animation: @name @duration @delay @ease;
-moz-animation: @name @duration @delay @ease;
-ms-animation: @name @duration @delay @ease;
}

Or better yet use Autoprefixer https://github.com/ai/autoprefixer with
your current preprossor, or download Preproshttp://alphapixels.com/prepros/and use the Autoprefixer option when you compile it.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11221#issuecomment-27125433
.

Zlatan Vasović - ZDroid

[zlatanvasovic]

@ElijahFowler Example code:

// Call animation for the active one
.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

@mdo Will the pull request help with this? I can send a pr with .animation() addition.

[mdo]

@zdroid Yeah, let's do it. I'd prefer a super short mixin though, like our .box-shadow() one:

.animation (@animation) {
    -webkit-animation: @animation;
       -moz-animation: @animation;
        -ms-animation: @animation;
}

Keeps it super open, unless folks have something that's more advantageous without being overly verbose.

[zlatanvasovic]

I'll. Thanks for reply.

2013/10/26 Mark Otto notifications@github.com

@zdroid https://github.com/ZDroid Yeah, let's do it. I'd prefer a super
short mixin though, like our .box-shadow() one:

.animation (@animation) {
-webkit-animation: @animation;
-moz-animation: @animation;
-ms-animation: @animation;}

Keeps it super open, unless folks have something that's more advantageous
without being overly verbose.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11221#issuecomment-27144539
.

Zlatan Vasović - ZDroid