Create a gist now

Instantly share code, notes, and snippets.

Mixin for CSS Animation
// =========== [[CSS Animation]] ===========
// Keyframes
// Usage:
// @include keyframes(name) {
// 0% { selector { property: value; } }
// 100% { selector { property: value; } }
// }
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
//animation-name
// value:: none | <custom-ident>
// Usage:
// selector {
// @include animation-name(name);
// }
@mixin animation-name($name) {
-webkit-animation-name: $name;
animation-name: $name;
}
//animation-duration
// value:: time
// Usage:
// selector {
// @include animation-duration(1.6);
// }
@mixin animation-duration($time) {
-webkit-animation-duration: $time + s;
animation-duration: $time + s;
}
// animation-iteration-count
// value:: infinite | <number>
// Usage:
// selector {
// @include animation-iteration-count(infinite);
// }
@mixin animation-iteration-count($count) {
-webkit-animation-iteration-count: $count;
animation-iteration-count: $count;
}
// animation-direction
// value:: normal | reverse | alternate | alternate-reverse
// Usage:
// selector {
// @include animation-direction(reverse);
// }
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
animation-direction: $direction;
}
// animation-timing-function
// value:: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
// Usage:
// selector {
// @include animation-timing-function(ease-in);
// }
@mixin animation-timing-function($function) {
-webkit-animation-timing-function: $function;
animation-timing-function: $function;
}
// animation-delay
// value:: time
// Usage:
// selector {
// @include animation-delay(0.8);
// }
@mixin animation-delay($time) {
-webkit-animation-delay: $time + s;
animation-delay: $time + s;
}
// animation-play-state
// value:: running | paused
// Usage:
// selector {
// @include animation-play-state(running);
// }
@mixin animation-play-state($state) {
-webkit-animation-delay: $state;
animation-delay: $state;
}
// animation-fill-mode
// value:: none | forwards | backwards | both
// Usage:
// selector {
// @include animation-fill-mode(forwards);
// }
@mixin animation-fill-mode($mode) {
-webkit-animation-fill-mode: $mode;
animation-fill-mode: $mode;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment