Added a mixin for keyframes that removes redundant prefixes in the keyframe's content #158

Closed
wants to merge 2 commits into
from

5 participants

@bmorrall

After looking at a few comments on a keyframe mixin (#98), and finding at a few solutions for Compass (https://github.com/ZeeAgency/compass-animation/blob/master/sass/_keyframes.sass)... I've added enable/disable flags to the prefixer, which allows for keyframes to be included, without redundant prefixes in its content.

For example, the following code:

@include keyframes(megatrippy) {
    from {
        background-position: top left;
        @include transform(rotate(0deg));
    }
    to {
        background-position: top right;
        @include transform(rotate(360deg));
    }
}

Produces the following CSS:

@-moz-keyframes megatrippy {
  from {
    background-position: top left;
    -moz-transform: rotate(0deg);
  }
  to {
    background-position: top right;
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes megatrippy {
  from {
    background-position: top left;
    -webkit-transform: rotate(0deg);
  }
  to {
    background-position: top right;
    -webkit-transform: rotate(360deg);
  }
}

@-o-keyframes megatrippy {
  from {
    background-position: top left;
    -o-transform: rotate(0deg);
  }
  to {
    background-position: top right;
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes megatrippy {
  from {
    background-position: top left;
    -ms-transform: rotate(0deg);
  }
  to {
    background-position: top right;
    -ms-transform: rotate(360deg);
  }
}

@keyframes megatrippy {
  from {
    background-position: top left;
    transform: rotate(0deg);
  }
  to {
    background-position: top right;
    transform: rotate(360deg);
  }
}
@alexmwalker

Dude, Nice work! I was trying to figure out this for the Christmas CSS animations, but ended up having to just swallow it generating redundant code in the keyframes. +1

@scottweisman

+1 for this

@JoshuaJones

+1

Awesome work.

@alexmwalker

Feels like a no-brainer to integrate this. Significantly better code with no downside.

Plus from a personal POV, I'm writing a piece on CSS animation with Bourbon, and it's easier to explain it without having to talk about project forks. ;)

@plapier

I agree, this is great. I'll merge it in after I get a chance to test it out.

@plapier

Merged

@plapier plapier closed this Feb 1, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment