Skip to content

Instantly share code, notes, and snippets.

@devkinetic
Forked from greypants/gist:3185028
Last active January 28, 2016 21:21
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 devkinetic/83d7f3e911674529de68 to your computer and use it in GitHub Desktop.
Save devkinetic/83d7f3e911674529de68 to your computer and use it in GitHub Desktop.
SCSS: keyframe mixins
// ======================================================================
// Animation.scss
// - Contains helpers for keyframes animation in css3
// - Only functionally with Sass 3.2.0 Alpha and Compass 0.13.alpha
// ======================================================================
@mixin animation($name) {
-webkit-animation: #{$name};
-moz-animation: #{$name};
-ms-animation: #{$name};
animation: #{$name};
}
@mixin animation-name($name) {
-webkit-animation-name: #{$name};
-moz-animation-name: #{$name};
-ms-animation-name: #{$name};
animation-name: #{$name};
}
@mixin animation-duration($name) {
-webkit-animation-duration: #{$name};
-moz-animation-duration: #{$name};
-ms-animation-duration: #{$name};
animation-duration: #{$name};
}
@mixin animation-timing-function($name) {
-webkit-animation-timing-function: #{$name};
-moz-animation-timing-function: #{$name};
-ms-animation-timing-function: #{$name};
animation-timing-function: #{$name};
}
@mixin animation-iteration-count($name) {
-webkit-animation-iteration-count: #{$name};
-moz-animation-iteration-count: #{$name};
-ms-animation-iteration-count: #{$name};
animation-iteration-count: #{$name};
}
@mixin animation-direction($name) {
-webkit-animation-direction: #{$name};
-moz-animation-direction: #{$name};
-ms-animation-direction: #{$name};
animation-direction: #{$name};
}
@mixin animation-delay($name) {
-webkit-animation-delay: #{$name};
-moz-animation-delay: #{$name};
-ms-animation-delay: #{$name};
animation-delay: #{$name};
}
@mixin animation-play-state($name) {
-webkit-animation-play-state: #{$name};
-moz-animation-play-state: #{$name};
-ms-animation-play-state: #{$name};
animation-play-state: #{$name};
}
@mixin animation-fill-mode($name) {
-webkit-animation-fill-mode: #{$name};
-moz-animation-fill-mode: #{$name};
-ms-animation-fill-mode: #{$name};
animation-fill-mode: #{$name};
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} { @content; }
@-moz-keyframes #{$name} { @content; }
@-ms-keyframes #{$name} { @content; }
@keyframes #{$name} { @content; }
}
@import "_animation";
@include keyframes(flash-effect) {
0% { background-color:none; }
50% { background-color:red; }
100% { background-color:none; }
}
.flash { // impliment using sub-properties
@include animation-name(flash-effect);
@include animation-duration(1.5s);
@include animation-timing-function(ease-out);
}
.flash { // impliment using shorthand
@include animation(flash-effect 1.5s ease-out);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment