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