Skip to content

Instantly share code, notes, and snippets.

@Fintan
Created January 28, 2014 13:57
Show Gist options
  • Save Fintan/8668110 to your computer and use it in GitHub Desktop.
Save Fintan/8668110 to your computer and use it in GitHub Desktop.
useful mixins showing how to create CSS animations using SASS. Some code wasn't taken from Bourbon library
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@-o-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
//bourbon
// Variable settings for /addons/prefixer.scss
$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default; // required for keyframe mixin
@mixin prefixer ($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
@if $prefix-for-webkit {
-webkit-#{$property}: $value;
}
}
@else if $prefix == moz {
@if $prefix-for-mozilla {
-moz-#{$property}: $value;
}
}
@else if $prefix == ms {
@if $prefix-for-microsoft {
-ms-#{$property}: $value;
}
}
@else if $prefix == o {
@if $prefix-for-opera {
-o-#{$property}: $value;
}
}
@else if $prefix == spec {
@if $prefix-for-spec {
#{$property}: $value;
}
}
@else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
}
@mixin transform($property: none) {
// none | <transform-function>
@include prefixer(transform, $property, webkit moz ms o spec);
}
@mixin animationTimingFunction($easingFunc) {
@include prefixer(animation-timing-function, $easingFunc, webkit moz ms o spec);
}
@include keyframes(sponsoring) {
0% { @include transform(translateX(30px)); opacity: 0}
60% { @include transform(translateX(300px)); opacity: 1}
100% { @include transform(translateX(300px)); opacity: 0}
}
//example usage:
.some-style {
@include animation('sponsoring 2.5s infinite');
@include animationTimingFunction(cubic-bezier(0.030, 0.615, 0.995, 0.415));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment