Skip to content

Instantly share code, notes, and snippets.

@aebsr
Last active December 26, 2015 21:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aebsr/7218939 to your computer and use it in GitHub Desktop.
Save aebsr/7218939 to your computer and use it in GitHub Desktop.
Proposed New Transition Mixin Set for http://github.com/hzdg/bedrock/
.verbose {
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transition-property: 1s;
-moz-transition-property: 1s;
-ms-transition-property: 1s;
-o-transition-property: 1s;
transition-property: 1s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-timing-function: 0.1s;
-moz-transition-timing-function: 0.1s;
-ms-transition-timing-function: 0.1s;
-o-transition-timing-function: 0.1s;
transition-timing-function: 0.1s;
}
.shorthand {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.inline-prefix-limit {
-webkit-transition-property: -webkit-opacity, height;
-moz-transition-property: -moz-opacity, height;
-ms-transition-property: -ms-opacity, height;
-o-transition-property: -o-opacity, height;
transition-property: opacity, height;
}
// MIXINS
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.transition-property(@property) {
-webkit-transition-property: @property;
-moz-transition-property: @property;
-ms-transition-property: @property;
-o-transition-property: @property;
transition-property: @property;
}
.transition-property(@property, @prefix) when (@prefix = true) {
-webkit-transition-property: ~"-webkit-@{property}";
-moz-transition-property: ~"-moz-@{property}";
-ms-transition-property: ~"-ms-@{property}";
-o-transition-property: ~"-o-@{property}";
transition-property: @property;
}
.transition-duration(@duration) {
-webkit-transition-property: @duration;
-moz-transition-property: @duration;
-ms-transition-property: @duration;
-o-transition-property: @duration;
transition-property: @duration;
}
.transition-timing(@timing) {
-webkit-transition-timing-function: @timing;
-moz-transition-timing-function: @timing;
-ms-transition-timing-function: @timing;
-o-transition-timing-function: @timing;
transition-timing-function: @timing;
}
.transition-delay(@delay) {
-webkit-transition-delay: @delay;
-moz-transition-delay: @delay;
-ms-transition-delay: @delay;
-o-transition-delay: @delay;
transition-delay: @delay;
}
// Keeps this from being a breaking change to bedrock,
// which already has a .delay() mixin
.delay(@delay) { .transition-delay(@delay) }
// USAGE
.verbose {
.transition-property(transform, true);
.transition-duration(1s);
.transition-timing(ease-in-out);
.transition-delay(0.1s);
}
.shorthand {
.transition(opacity 0.3s);
}
.inline-prefix-limit {
.transition-property(~"opacity, height", true)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment